Im kind of new to CSS and im trying to create a simple layout for a site. and i have a container box go around the rest of my divs but its not expanding when the other divs expand. Dont mind the colors but you can see it here
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/">http://conor.shadowlink89.com/</a><!-- m -->
As you can see the boxes with the links go outside of the "container" box. Ive only viewd the page in operaYou haven't closed the <div id="container">
Always validate your markup.
I don't know if this will solve your problem, but it can't hurt.In Mozilla FireFox, everything is fine except the white box is pushed to the right and gives my 800x600 pixel screen a horizontal scrollbar...
[J]onathanks lava my page is valid now but the div is not expanding on opera ill check it out in firefox. Yup same in firefox as opera the container div does not expand it should contain every other div inside of it.The reason the #container <div> isn't expanding as you expect is because you have absolutely positioned the side bars, therefore the height of the #container <div> is only as much as your content <div>'s height plus the 20 pixel bottom margin you have.when i relatively positioned them they went to the bottom of the screnn one right under eachother.You could float the sidebars, or explicitly set a height for the #container <div>yeah but if i explicitly set the height and i had more content then that height it wouldnt work.i have a question. I really hate the look of my site an i have plenty of visions of what i want but i just cant figure out how to do it. Ive been to w3schools numerous times and know what the stuff is i just dont really know how to implement it. Are there any sites you would reccomend with good tutorials on how to actually build a basic CSS site. I tred bluerobt but i just find myself using it instead of trying to learn myself which is why i believe a good tutorial could help me more.I like to start off with Layout-o-Matic (<!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->) and mod from there. Also, get an editor that can preview your css in real time like the css editor extension for foxfire. That's a real learning and productivity tool for sure.yup i just Download ed that earlier its great for testing.how do i get a background image to expand past the link and like take up the whole line where the link is. Right now it only goes over the link
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/Originally">http://conor.shadowlink89.com/Originally</a><!-- m --> posted by RefreshF5
how do i get a background image to expand past the link and like take up the whole line where the link is. Right now it only goes over the link
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/">http://conor.shadowlink89.com/</a><!-- m -->
Use display: block; and set its width to a certain amount.
[J]onause display block where?
where would i put it in here
a {
background-image: url(linkbg1.gif);
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration: none;
}a {
background-image: url(linkbg1.gif);
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration: none;
display: block;
width: 50%;
}
[J]onathanks so to stop that big space id have to make the image bigger?Originally posted by RefreshF5
thanks so to stop that big space id have to make the image bigger?
That or make the percentage in width smaller.
[J]onawhen i make the width smaller it makes the image display less i want the links to be one after each other like the images are touching.Originally posted by RefreshF5
when i make the width smaller it makes the image display less i want the links to be one after each other like the images are touching.
Okay I didn't get that. You're saying if you make the width smaller, the height of the background image decreases?
[J]onano it doesnt go as far look ill set the width to 10% look nowHmm, does the actual image have transparent area on its right?
[J]onano its just a little squaew
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/linkbg1.gifAdd">http://conor.shadowlink89.com/linkbg1.gifAdd</a><!-- m --> repeat-x to the background.
[J]onabackground-image: url(linkbg1.gif) repeat-x;
like that? cuz that didnt workbackground: url(linkbg1.gif) repeat-x;
[J]onanope its the same. Ill just do something else with the links thanks fro the help.Is there anything wrong with using a background color? (Just curious.)
[J]onai tried that as well and it didnt work that why i tried bg image...Weird.
Edit: It works fine when I bump it up to 50% width.
[J]onanot for me. It doesnt stretch the whole length of the navbard and they dont connectdisplay: block;
width: 100%;
margin: -1em;
[J]onaperfectTo all you Internet Explorer users:
This problem has been solved using a plugin for Mozilla FireFox which allows editing of the CSS of any page where you can see it update as you code it. Just one more reason why Mozilla pwns IE.
[J]onai would never use IE.
I use
Opera
Safari
Firefox
Ill look into that extension though
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/">http://conor.shadowlink89.com/</a><!-- m -->
As you can see the boxes with the links go outside of the "container" box. Ive only viewd the page in operaYou haven't closed the <div id="container">
Always validate your markup.
I don't know if this will solve your problem, but it can't hurt.In Mozilla FireFox, everything is fine except the white box is pushed to the right and gives my 800x600 pixel screen a horizontal scrollbar...
[J]onathanks lava my page is valid now but the div is not expanding on opera ill check it out in firefox. Yup same in firefox as opera the container div does not expand it should contain every other div inside of it.The reason the #container <div> isn't expanding as you expect is because you have absolutely positioned the side bars, therefore the height of the #container <div> is only as much as your content <div>'s height plus the 20 pixel bottom margin you have.when i relatively positioned them they went to the bottom of the screnn one right under eachother.You could float the sidebars, or explicitly set a height for the #container <div>yeah but if i explicitly set the height and i had more content then that height it wouldnt work.i have a question. I really hate the look of my site an i have plenty of visions of what i want but i just cant figure out how to do it. Ive been to w3schools numerous times and know what the stuff is i just dont really know how to implement it. Are there any sites you would reccomend with good tutorials on how to actually build a basic CSS site. I tred bluerobt but i just find myself using it instead of trying to learn myself which is why i believe a good tutorial could help me more.I like to start off with Layout-o-Matic (<!-- m --><a class="postlink" href="http://www.inknoise.com/experimental/layoutomatic.php">http://www.inknoise.com/experimental/layoutomatic.php</a><!-- m -->) and mod from there. Also, get an editor that can preview your css in real time like the css editor extension for foxfire. That's a real learning and productivity tool for sure.yup i just Download ed that earlier its great for testing.how do i get a background image to expand past the link and like take up the whole line where the link is. Right now it only goes over the link
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/Originally">http://conor.shadowlink89.com/Originally</a><!-- m --> posted by RefreshF5
how do i get a background image to expand past the link and like take up the whole line where the link is. Right now it only goes over the link
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/">http://conor.shadowlink89.com/</a><!-- m -->
Use display: block; and set its width to a certain amount.
[J]onause display block where?
where would i put it in here
a {
background-image: url(linkbg1.gif);
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration: none;
}a {
background-image: url(linkbg1.gif);
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration: none;
display: block;
width: 50%;
}
[J]onathanks so to stop that big space id have to make the image bigger?Originally posted by RefreshF5
thanks so to stop that big space id have to make the image bigger?
That or make the percentage in width smaller.
[J]onawhen i make the width smaller it makes the image display less i want the links to be one after each other like the images are touching.Originally posted by RefreshF5
when i make the width smaller it makes the image display less i want the links to be one after each other like the images are touching.
Okay I didn't get that. You're saying if you make the width smaller, the height of the background image decreases?
[J]onano it doesnt go as far look ill set the width to 10% look nowHmm, does the actual image have transparent area on its right?
[J]onano its just a little squaew
<!-- m --><a class="postlink" href="http://conor.shadowlink89.com/linkbg1.gifAdd">http://conor.shadowlink89.com/linkbg1.gifAdd</a><!-- m --> repeat-x to the background.
[J]onabackground-image: url(linkbg1.gif) repeat-x;
like that? cuz that didnt workbackground: url(linkbg1.gif) repeat-x;
[J]onanope its the same. Ill just do something else with the links thanks fro the help.Is there anything wrong with using a background color? (Just curious.)
[J]onai tried that as well and it didnt work that why i tried bg image...Weird.
Edit: It works fine when I bump it up to 50% width.
[J]onanot for me. It doesnt stretch the whole length of the navbard and they dont connectdisplay: block;
width: 100%;
margin: -1em;
[J]onaperfectTo all you Internet Explorer users:
This problem has been solved using a plugin for Mozilla FireFox which allows editing of the CSS of any page where you can see it update as you code it. Just one more reason why Mozilla pwns IE.
[J]onai would never use IE.
I use
Opera
Safari
Firefox
Ill look into that extension though