Hello, I’m super new to this web page making. I read some books about HTML and CSS, and tried to make a web page. My page looks simple, but OK with 100% view, however, when I zoom in and out, the layout looks different. For example, the banner at the top doesn’t flow all the way to the right, and the body content in the middle is not in the middle anymore. Why?
HI, YokoJS. Welcome to the forum.
It is not possible to tell why your page is not behaving as you expect it to without seeing the code for that page. If you can post a “working page”, one that starts with the doctype and ends with </html> and demonstrates the problem, that would be ideal. Otherwise, a link to your server would be fine.
We really do need a website like Ron says, although it soudns like you made your website into a fixed/hybrid layout - e.g. you set pixel widths on items (like your banner) and the containers might have pixel or % widths…if the children are fixed width then it won’t scale up and down with the container.
Hi Ron and Ryan,
Thank you so much for commenting to my question. I feel embarrassed to show you my code, as I am a super beginner. But here it is. I pasted my CSS markup instead of the HTML markup, because I am not sure what you can tell just by looking at HTML. It says nothing about sizes, etc. I don’t think I set any width for my banner. I actually think I fist put the width for the banner as 100% as the book recommended, but then when I deleted that statement, it didn’t make any difference on what the page looked like. Also, I mostly used “ems” instead of “px” in other places because I read that “ems” make things more flexible. I hope what I’m talking about makes sense to you guys. Also, here is the link to my page…it is really simple, and you might think it’s silly. Anyway, thank you very much.
/*
CSS for Art By Yoko JS site
*/
body {
font-family: Calibri, "Comic Sans MS", Arial, sans-serif;
background: #CCCCF5 url(backgroundimage/purplebackground.png);
}
#sitebranding {
font-family:"curlz MT", "French Script MT", "Comic Sans MS", Arial, sans-serif;
border: 5px ridge pink;
background-color: blue;
color: pink;
font-weight: bold;
padding-top: 20px;
text-align: center;
font-size: 50pt;
margin: 0;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 20pt;
}
#tagline {
font-family: "Segoe Print", Pristina, "Comic Sans MS", Arial, sans-serif;
color: blue;
font-size: 16pt;
padding-top: 1.5em;
padding-right: 1em;
width: 48em;
height: 15em;
text-align: right;
background: lightblue url(backgroundimage/srmra3.jpg) no-repeat;
}
#bodycontent {
font-size: 16pt;
padding-left: 18em;
padding-top: 2em;
padding-right: 2em;
width: 29em;
background: white;
}
#navigation {
width: 280px;
border: 8px ridge chocolate;
box-shadow: 10px 10px 5px #888888;
font-size: 16pt;
background: lightblue url(backgroundimage/blue5.jpg);
}
#yokosphoto {
padding-left:20px;
}
li {
list-style-type: square;
font-size: 16pt;
}
img {
border: 10px ridge chocolate;
box-shadow: 10px 10px 5px #888888;
}
/*
This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured from the top-left corner of the browser's content display.
*/
#tagline, #bodycontent, #navigation {
position: absolute;
}
#tagline {
top: 5.55em;
left: 14em;
}
#bodycontent {
top: 22em;
left: 14em;
}
#navigation {
top: 2em;
left: 2em;
}
#yokosphoto {
float:right;
}
Thank you but we also need the HTML to go along with that. Makes it easier for us to have a complete page to look at 
. If you have a live link, we would prefer that obviously.
I thought I put the link, but I guess I didn’t. Here it is:
http://www3.telus.net/artbyyokojs/index.html
Thank you for your comment.
You’re trying to center hte page completely wrong. Remove the absolute positioning and the top/left off everything. I will tell you something that will revolutionize your world
You can center an element that has a width IF you give left/right auto margins. E.g. width:200px;margin:0 auto; will center that element on ANY screen size. You’re trying to center based off random calculations.
So on #tagline and #bodycontent I removed position:absolute and top/left and I added margin:0 auto; and it centers.
You are right, it did the trick! But I still have the problem placing the navigation box. What can I do to keep it on the left side of the white area?
Also, after I made changes using the margin:0 auto thing, the banner got super big and I can’t get rid of the padding on the top. The bottom padding, I squished off by setting the height for “#sitebranding”, although I felt like that was not the best way to do it.
Anyway, thank you very much!
Do you want it fixed (the navigation) to the left at all times? You need to move #navigation outside of #bodycontent and make it into a two column layout.
The banner is the same size I believe? Either way, it’s 48em wide since it’s a background image on #pageheader.
What padding are you talking about?
Thank you again. I haven’t uploaded the edited page yet until now. A two-column layout… Oh, I need to do more homework before I can do that. Meanwhile, I positioned only “navigation” as absolute. It’s out of position when zoomed in and out but it will do until I get to work on the two-column layout.
The padding I was talking about is the top part between the pink text and the top of the border (the blue area). Somehow I can’t get rid of the space.
By the way, now that I deleted “absolute positioning” of #tagline and #bodycontent, how does the system know how low from the top these blocks should be positioned? Sorry, if I was bothering you with very basic questions.
It’s out of position because you are centering it based on YOUR resolution. SMaller/bigger resolutions will suffer. 99.9% of the time you will never rely on position:absolute to lay out your page. Trust me. Float it if you need to but you can lay out a lot of containers with just widths and margin: 0 auto trick.
What is the maximum width that you wish your page to be?
Wrong question … Try again…
What is the “reference” or “default” width that you wish your page to be, since it will become wider (or narrower) if the user zooms the page in his browser.
There is something called "yokosphoto in CSS but nothing in HTML. Where is that photo and where does it belong?
We haven’t heard from you, so I gave it a “best guess”.
This is not your code. I rewrote it pretty much from scratch and changed the few remaining IDs to classes (my preference).
It scales if the font-size only is zoomed in Firefox, et.al, and adapts to a modestly good range of window widths from a max of 70em (whatever that happens to be).
Most of your font sizes are set in points. Although ems are the recommended unit of measure, I left most of them alone. I recommend that you change the pts to ems.
If you want to know how something is positioned, put an outline around it (or assign a background color, if practical). Although outlines sometimes can be misleading, they don’t affect the layout.
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="utf-8">
<link href="style2a.css" rel="stylesheet" type="text/css">
<title>Art By Yoko JS - Picture book illustrations and watercolour paintings</title>
<style>
body {
font-family:Calibri, "Comic Sans MS", Arial, sans-serif;
padding:0;
margin:0;
background:#ccccf5 url(backgroundimage/purplebackground.png);
}
h1 {
border:5px ridge pink;
background-color:blue; /* better to use hex codes for colors, not words */
color:#ffc0cb;
font-weight:bold;
font-size:3.25em;
line-height:2;
font-family:"curlz MT", "French Script MT", "Comic Sans MS", Arial, sans-serif;
text-align:center;
margin:0;
}
h2 {
font-size:24pt;
margin:.5em 0;
}
h3 {
font-size:20pt;
}
.outer {
max-width:70em;
margin:0 auto;
}
.tagline {
background-image:url(backgroundimage/srmra3.jpg); /* 1176 x 352 */
background-position:50% 50%;
background-size:cover;
padding-top:30%;
position:relative;
}
.tagline p {
position:absolute;
top:0;
right:0;
font-family: "Segoe Print", Pristina, "Comic Sans MS", Arial, sans-serif;
color:blue;
font-size:16pt;
text-align:right;
padding-left:34%;
padding-right:1em;
}
.content {
display:table;
width:100%;
font-size:16pt;
background:#fff;
}
.tcell {
display:table-cell;
vertical-align:middle;
padding:1em;
}
.tcell.nav {
width:40%;
text-align:right;
}
.tcell.yoko {
width:60%;
}
.nav ul {
display:inline-table;
list-style-type:square;
border:8px ridge chocolate;
box-shadow:10px 10px 5px #888;
font-size:16pt;
background-image:url(backgroundimage/blue5.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
text-align:left;
padding:.75em 1em .75em 2em;
margin:.5em 0;
}
.yoko p {
margin:1em 0;
}
.yoko b {
color:blue;
font-weight:bold;
}
#yokosphoto {}
</style>
</head>
<body>
<div class="outer">
<h1>Art By Yoko JS</h1>
<div class="tagline">
<p>-Picture book illustrations and watercolour paintings-</p>
</div>
<div class="content">
<div class="tcell nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bookillustrations.html">Picture Book Illustrations</a></li>
<li><a href="watercolourpaintings.html">Watercolour Paintings</a></li>
<li><a href="about.html">About Yoko JS</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</div>
<div class="tcell yoko">
<h2>Welcome to <b>Art By Yoko JS</b> web site</h2>
<p>Hi, my name is Yoko Johnsen-Sollos. <b>Art By Yoko JS</b> is a web site created by me. I am an illustrator/children's book writer based in Edmonton, Canada. I like the pristine world of watercolours as well as the textures created by crayons and art pencils. You can find examples of my art work on this web site. Thank you for visiting!</p>
</div>
</div>
</div>
</body>
</html>
1 Like
Wow…thank you so much for taking time to do this for me. I need to study what you wrote and try to understand. People have been so helpful in this forum. I will keep working on my page. Thank you!
You’re welcome. If you have questions, you have our number