mrkidd85 Posted March 2, 2009 Share Posted March 2, 2009 Hi. I am just messing about at the moment with CSS but I have encountered a little problem. At the moment I am learning how to include a picture as a header. On this occasion I have attempted to size the header so it is as wide as the wrapper and 100px high. However, it has not done this and the size of the random picture is much bigger. I will copy and paste the CSS I have and then give a link to the web page. As I said before it is only me messing about at the moment, getting to know how to script a little better. Also, another question. In positioning boxes, how can I position a box directly below the box on the left with an equal margin to the other box. I tried to float left but it sat next to it and not underneath.CSS Script is:@charset "utf-8";/* CSS Document */body {margin: 0 auto;padding: 0;background-color: #C0C0C0;text-align: center; }p {font-family:"arial", Times, serif;font-size: 14px;font-style: italic;line-height: 1.5em;}#wrapper {background-color: #ffffff;position: relative;height: 700px; width: 750px; margin: 50px auto; }#header {position: relative;height: 100px;width: 725pxmargin: 0px auto}#main {height: 500px;width: 500px;margin: 0 auto; position: relative; } #main .subone {background-color: #FFFF00;height: 400px;width: 200px; margin: 5px; float: left; font-size: 14px; color: #000000;border: #000000 1px solid;}#main .subtwo {height: 300px;width: 200px; margin: 10px; float: right;font-size: 18px; color: #0000FF;border: #006600 1px groove; }#dan {background-color: #00FFFF;height: 200px;width: 200px; margin: 5px; float: right; font-size: 14px; color: #000000;border: #000000 1px solid;}Web page is : HERethanks.Dan Link to comment Share on other sites More sharing options...
4D1 Posted March 2, 2009 Share Posted March 2, 2009 Not quite sure what you are trying to acheive but if you are trying to resize nelly furtado to 100px high x 750px wide I dont think she would look very good. I am still learning CSS myself and I am not quite sure what you are after but I think you just want to add style="{width: 750px; height: 100px;}" to the image in your HTML file, or in your head div do {background-image: url'****';} to set your image as the background and resize it in a photo editor. Have you tried {clear: top;} or {clear: left;} to get your box underneath? This may help if not I am sure someone much better than me will Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 2, 2009 Author Share Posted March 2, 2009 It was the first pic I found on google. I need to know how to change the pic to that size, I have entered it in the code, why isn't it doing it? Link to comment Share on other sites More sharing options...
4D1 Posted March 2, 2009 Share Posted March 2, 2009 I didn't see any size specified against the picture itself only the box/div it was in. You dont want to resize images in the browser anyway if it is a larger image being made smaller then there is just more data for people visiting your site to download and also because no browser preserves ratio, you would be much better resizing the image in an editor to the exact size you need. but if you add the code above to your image it will work <img src="****" style="{***}" like so. Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 2, 2009 Author Share Posted March 2, 2009 OK thanks, but what am I supposed to write in style(****)??I am extremely new to this. Link to comment Share on other sites More sharing options...
4D1 Posted March 2, 2009 Share Posted March 2, 2009 <div id="header"><img src="http://www.aolcdn.com/aolr/2-nelly-furtado-400a061107.jpg" style="{height: 100px; width: 750px;}"></div>Try this Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 2, 2009 Author Share Posted March 2, 2009 I tried it but then that ruins the other divs, the boxes are no longer there.Take a look, I don't understand why Link to comment Share on other sites More sharing options...
4D1 Posted March 2, 2009 Share Posted March 2, 2009 add #main .subone {background-color: #FFFF00;height: 400px;width: 200px; margin: 5px; float: left; font-size: 14px; color: #000000;border: #000000 1px solid;clear: top;} Your image is out because it is overlapping your divs, with css you can have 2 things in the same place Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 3, 2009 Author Share Posted March 3, 2009 I take it the clear:top bit is the important bit? Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 3, 2009 Author Share Posted March 3, 2009 where exactly do I add this, I just tried replacing it on the lessonone.css but it didnt do anything.thanksdaniel Link to comment Share on other sites More sharing options...
4D1 Posted March 3, 2009 Share Posted March 3, 2009 Yeah it tells your box to clear what is above as opposed to overlap Link to comment Share on other sites More sharing options...
4D1 Posted March 3, 2009 Share Posted March 3, 2009 Sorry I havent been checking your source code as your site takes ages to load for me, you have missed part of the code style="{height: 100px; width: 750px; ( }" is missing the browser thinks everything is a style you need to close it off) Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 3, 2009 Author Share Posted March 3, 2009 I just closed it off but it is still coming up as the same thing, God this is frustrating. Also, why isn't my photo completely inside the wrapper when you go on it, it is slightly to the right? Link to comment Share on other sites More sharing options...
4D1 Posted March 3, 2009 Share Posted March 3, 2009 I thought when I wrote it you would type the whole thing, lol you need to delete:(} and in its place put }" thats all and it will be closed off correctly Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 3, 2009 Author Share Posted March 3, 2009 Done. Thanks alot for that mate, please excuse my stupidity.Dan Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 3, 2009 Author Share Posted March 3, 2009 actually, if you look at the page the photo is slightly to the right of the wrapper, any ideas how to fix this? Link to comment Share on other sites More sharing options...
4D1 Posted March 3, 2009 Share Posted March 3, 2009 Sorry for not replying my little boy woke up, your header div is only 725px and your image is 750px hence the overflow, change the image to 725 and then because your header div is auto margined it should be central Link to comment Share on other sites More sharing options...
mrkidd85 Posted March 3, 2009 Author Share Posted March 3, 2009 It is now centred but I want the image to be the same width as the div with no border, but there is still white space, even though the pic is exactly the same width. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.