How do I make my very simple website look right at different resolutions?
Question
My very simple website (see code below) is based on CSS/HTML.
It looks just perfect at 1600 x 900 but if I change that the site gets really messy.
How do I make it look right at different resolutions?
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>Dogma Hostil</title>
</head>
<body>
<div id="titulo">
<p>Dogma Hostil</p>
</div>
<div id="raya"><p>___________</p></div>
<div id="cita">
<p>Todo comienzo tiene su encanto</p>
<a id="author" href="http://es.wikipedia.org/wiki/Johann_Wolfgang_von_Goethe">Goethe</a>
</div>
</body>
</html>
CSS:
#titulo {
position: absolute;
left: 17%;
top: 17%;
z-index:1;
display: inline-block;
}
#titulo p {
color: black;
font-family: Verdana;
font-size: 1000%;
z-index: 2;
display: inline-block;
}
#titulo p:hover {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00ff78, 0 0 70px #00ff78, 0 0 80px #00ff78, 0 0 100px #00ff78, 0 0 150px #00ff78, 0 0 299px #000000, 0 0 5px #000000;
z-index: 3;
}
#raya {
position: absolute;
left:16%;
top:20%;
z-index: -1;
}
#raya p {
color:black;
font-family: Verdana;
font-size: 1000%;
z-index: 0;
}
#cita{
position: absolute;
left: 80%;
}
#cita p {
color:black;
font-family: Verdana;
font-size: 100%;
}
#author {
position: absolute;
left:78%;
top:65%;
color: black;
font-family: Verdana;
text-decoration: none;
}
3 answers
solution1
2 2014-02-08 22:10:00
You are experiencing one of the chief difficulties in "web/mobile design" today...
Your design is made using mostly static design principles.
Use responsive / adaptive or fluid ( aka liquid ) design principles:
Responsive: http://en.wikipedia.org/wiki/Responsive_web_design
Adaptive: http://en.wikipedia.org/wiki/Adaptive_web_design
Fluid/Liquid: https://ux.stackexchange.com/questions/24406/what-is-the-exact-difference-between-fluid-and-responsive-design
Go see examples of the top four design philosophies being used today, and how they compare:
...there you can switch between them real-time, play with the differences yourself, and learn by example.
The switch to responsive design especially is a major era change in "web design" and its philosophies. It is not taught widely enough, but is not very difficult to learn.
"Superficial" changes like adjusting from px to em or % in CSS are not going to really help you. Today, design must take phone, tablet, and low-resolution & and high-resolution desktops into account from the start. Best of luck to you as you look into responsive / adaptive and fluid design.
solution2
1 ACCPTED 2014-02-08 22:03:24
Your first lesson. If you use Absolute positioning, unless you absolutely (no pun intended) know what you're doing, you will likely break your design when resizing.
You want fluid and/or responsive layouts, these are layouts that adjust to different sizes well.
Here's a good article to get you started.
http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
Even if you want a fixed-sized layout, you still have to take into account that the browser may be different sizes. So you need to use automatic margins, unless you plan to make everything bound to the top left corner of your browser window.
For instance, it's super easy to center block level elements (such as divs), you just set the left and right margin to auto.
#content { margin: 0 auto; }
Also, Use the natural flow layout of the browser to your advantage. Most things base their positions (margins, borders, padding, etc..) based on their parent element. So by using proper padding or margins, you can position things where you want them, and they'll automatically re-lay themselves out in the right place based on that parent.
solution3
0 2014-02-08 21:04:51
不要使用百分比或尝试在body标签上添加100％的描述
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.