Ida
-
Posts
11 -
Joined
-
Last visited
Ida's Achievements
Newbie (1/7)
0
Reputation
-
I have done this and I also use a background image but it doesn't work. Maybe I don't understand what you mean...This is what the code looks like for the div:#wrapper_left { width:16px; height:100%; background:url(../bilder/blad_v.gif) repeat-y; float:left; } I also just realized that it doesn't look good in FF and Opera after all. When i rescale the winow to a smaller size the divs jumps down. Any idea why this happens and how to fix it?The link again: My Webpage
-
Hi, Finally i have sorted out my layout apart from one thing that doesn't turn out the way I want.It's a div that doesn't strech all the way down even though i've set the height to 100%. Take a look here and you can see what I mean. Doesn't look so nice with the gap.Does anyone have any advice on how to fix this?
-
Tanks for your help. I've tried this now and it looks almost good in FF but worse in IE, but I think i'm on the right track and I'll keep working on it. I might come back later if i can't fix it
-
OK, I have now tried this but there is no difference. Still looks messy in Firefox.
-
Hi everyone!I'm pulling my hair here and I hope someone can help me. I'm having difficulties with layout using CSS. It looks almost OK in IE but in Firefox it looks terrible. I'm trying to get the page to strech from an absolute position at the left hand side, all the way out to the right hand side of the window. In other words it's both absolute positioned and liquid (understand me?) Here is the link anyway and you can see for you self My WebpageHowever in firefox the divs ends upp underneith eachother instead of beside eachother. I've used float:left but it doesn't help. Maybe it has something to do with width but i don't know how to fix it.Here is the html <body><div id="tojlogo"></div><div id="link_anv_on">Användare</div><div id="link_admin_off"><a href="#" class="linksbutton">Administratör</a></div><div id="link_rapport_off"><a href="#" class="linksbutton">Intressent</a></div><div id="wrapper"><div id="wrapper_top"> <div id="blad_top_v_horn"></div> <div id="blad_top_statisk"></div> <div id="flik_on_v"></div> <div id="flik_on"><a href="#" class="linksbutton">Tidkort</a></div> <div id="flik_on_h"></div> <div id="flik_off_v"></div> <div id="flik_off"><a href="#" class="linksbutton">Egna rapporter</a></div> <div id="flik_off_h"></div></div><div id="wrapper_middle"> <div id="wrapper_left"> <div id="blad_v_anv_aktiv"></div> </div> <div id="wrapper_main"> <br> <form name="form1" method="post" action=""> <table width="75%" height="217"> <tr> <th width="8%" height="100" > </td> <td width="92%" rowspan="5" valign="top" class="helg">sfghfdg</td> </tr> <tr> <td height="27" class="vit"> </td> </tr> <tr> <td height="32" class="vit"> </td> </tr> <tr> <td height="23" class="vit"> </td> </tr> <tr> <td height="23" class="vit"> </td> </tr> </table> <p> </p> <p> <textarea name="textarea"></textarea> <select> <option>svenska</option> <option>Engelska</option> </select> </p> </form> </div> </div><div id="wrapper_bottom"> <div id="blad_ned_v_horn"></div> </div> </div> </body> And here is the css: body { background:url(../bilder/bg.gif) repeat-x #2882A1; background-attatchment:fixed; scrollbar-face-color: #aacfe0; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ffffff; } #informerlogo { background:url(../bilder/logo.gif) no-repeat; width:93px; height:35px; bottom:0px; right:0px; position:relative; float:right; left: 933px; }/*----------- Tojlogo med gubbe i bakgrunden --------*/#tojlogo { background:url(../bilder/logo_toj.gif) no-repeat; width:151px; height:315px; position:absolute; top:0px; left:0px;}/* ------ Vänsterlänkar -------*/#link_anv_on { position:absolute; top:153px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #fff; background:url(../bilder/kn_anvandare_on.gif) no-repeat;}#link_anv_off { position:absolute; top:153px; left:0px; width:122px; height:31px; z-index: 1; background:url(../bilder/kn_anvandare_off.gif) no-repeat;}#link_admin_on{ position:absolute; top:187px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #fff; background:url(../bilder/kn_admin_on.gif) no-repeat;}#link_admin_off { position:absolute; top:187px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #003551; background:url(../bilder/kn_admin_off.gif) no-repeat;}#link_rapport_on { position:absolute; top:221px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 7px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #fff; background:url(../bilder/kn_rapport_on.gif) no-repeat;}#link_rapport_off { position:absolute; top:221px; left:0px; width:122px; height:31px; z-index: 1; padding-top: 8px; padding-left: 25px; font-family: verdana,arial,san-serif; font-size:12px; font-weight:bold; color: #003551; background:url(../bilder/kn_rapport_off.gif) no-repeat;}/*---------"Bladet"-----------*//*---------Box som innehåller hela "bladet"-------*/#wrapper { position:absolute; top:57px; left:122px; z-index: 2; width:100%; }/*--------innehåller topdelen-----*/ #wrapper_top { height:42px; width:100%; background:url(../bilder/blad_top.gif) repeat-x; } #wrapperflikar{ height:46px; float:left; vertical-align:bottom; } #blad_top_v_horn { background:url(../bilder/blad_top_v_horn.gif) no-repeat; float:left; width:16px; height:46px; } #blad_top_statisk { background:url(../bilder/blad_top.gif) repeat-x; float:left; width:40px; height:46px; } #blad_top_dynamisk { background:url(../bilder/blad_top.gif) repeat-x; float:left; width:50%; height:46px; } #flik_on_v{ background:url(../bilder/flik_on_v.gif) no-repeat; float:left; width:36px; height:46px; } #flik_on{ background:url(../bilder/flik_on.gif) repeat-x; float:left; height:46px; padding-top:14px; } #flik_on_h{ background:url(../bilder/flik_on_h.gif) no-repeat; float:left; width:36px; height:46px; } #flik_off_v{ background:url(../bilder/flik_off_v.gif) no-repeat; float:left; width:36px; height:46px; } #flik_off{ background:url(../bilder/flik_off.gif) repeat-x; float:left; height:46px; padding-top:14px; } #flik_off_h{ background:url(../bilder/flik_off_h.gif) no-repeat; float:left; width:36px; height:46px; } #blad_top_h_horn { background:url(../bilder/blad_top_h_horn.gif) no-repeat; float:right; width:16px; height:46px; } /*---------Innehåller hela mittendelen under topdelen*/ #wrapper_middle { width:100%; height:100%; } /*---------Innehåller vänsterkanten på bladet som ligger i wrapper_middle------*/ #wrapper_left { width:16px; height:100%; background:url(../bilder/blad_v.gif) repeat-y; float:left; }/*---------*/ #blad_v_anv_aktiv { background:url(../bilder/blad_v_anv_aktiv.gif) no-repeat; width:16px; height:264px; } #blad_v { background:url(../bilder/blad_v.gif) repeat-y; width:16px; height:100px; }/*-------Innehåller tidkortet--------*/ #wrapper_main{ background-color:#E5F7FF; float:left; margin:0px; padding:20px; vertical-align:top; clear: right; height:100%; width:99%; } /*------Innehåller högerkanten på bladet--------*/ #wrapper_right { float:left; width:16px; } #blad_h { background:url(../bilder/blad_h.gif) repeat-y; width:16px; float:right; height:100% } #wrapper_bottom{ height:16px; width:100%; background:url(../bilder/blad_ned.gif) repeat-x top; } #blad_ned_v_horn { background:url(../bilder/blad_ned_v_horn.gif) no-repeat top; float:left; width:16px; height:16px; } #blad_ned { background:url(../bilder/blad_ned.gif) repeat-x top; float:left; height:16px; width:95%;} #blad_ned_h_horn { background:url(../bilder/blad_ned_h_horn.gif) no-repeat; float:right; width:16px; height:16px; } I would be so grateful if someone could help me with this.Thank you!
-
Tank you so much! Learning something new every day
-
Hi!I have the same problem but in height, so if you find out how to fix it can you please tell me how you did it?! Regards,Ida
-
Can anyone help me please.I need to get a container to expand (like a table does) in height when the content expands. Is this possible? It looks fine in IE but not in Firefox and Opera. It is the menu that is placed in the layoutContainer that continues outside the layoutConainer. You can see how it looks now here: http://www.visioni2i.se/ida/om_kristallforum.htmlHere is the css code: /* --------Layout------ */#container { width: 750px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; } #bgTopShadow { float:left; width: 750px; height: 7px; background:url(top_shadow.gif) no-repeat; background-position: bottom left;}#middleContainer { float:left; width: 750px; height:100%; vertical-align: top; background-color:#FFFFFF; } #bgLeftShadow { float:left; width: 7px; height: 424px; background:url(left_shadow.gif) repeat-y; } #bgStartLeft { float:left; width: 430px; height: 424px; background:url(bg_start.gif) repeat-x; padding:0px; }#bgStartRight { float:left; width: 306px; height: 424px; background:url(krona_start.jpg) no-repeat; }#bgRightShadow { float: left; width: 7px; height: 424px; background: url(right_shadow.gif) repeat-y; } #bgBottomShadow { float: left; width: 750px; height: 7px; background:url(bottom_shadow.gif) no-repeat; } #introtext { width: 350px; position:relative; top: 40px; padding: 0; margin: 0 auto; } #logoStart { margin: 0 auto; width: 236px; } #erbjudandeStart { float: right; } #bgMenu { float: left; width: 146px; height: 424px; background:url(leftbar.jpg) no-repeat; background-color:#041B5F; padding-left: 20px; padding-right: 20px; padding-top: 90px; } #main { float:left; width: 300px; height: 100%; background-color:#FFFFFF; background-position:bottom right; height:auto; padding-left: 30px; padding-top: 40px; margin: 0; } #boxMenu { float:left; postition: relative; width: 140px; margin: 0 auto; padding-left: 20px; padding-right: 20px; padding-top: 90px; top: 180px; height:auto; } #layoutContainer { float:left; width: 736px; height:auto; background:url(bgLayout.gif) repeat-y; background-position:top; background-color:#FFFFFF; padding-left: 7px; padding-right: 7px; overflow: visible; }#bgOmKristall { float:right; width: 182px; height: 427px; background:url(empire6_oxid.jpg) no-repeat; vertical-align:bottom; background-position:bottom right;} Thanks!
-
I fixed it! :)I put background-position: bottom left on the div and it pushed the image down. I don't know what would have happened if i had another box on top of that though. But i'm happy for now.Thanks for your help. It made me try other ways
-
I have made sure that the hight on the box and the image is correct so that should not be the problem. However i just saw that when i pass the mouse over the box (I'm using Dreamweaver) there's some kind of infobox that says: height: 7px (16px). What could these parenthesis mean? I can't find 16 px anywhere in the code. It's really odd.
-
I'm new at CSS layout and need some help. The problem that i have is that there is a gap between the top box and the boxes underneath. Doesn't look very nice. I've tried all kinds of things but nothing works.It works fine in FireFox and Opera but not in IEYou can see how it looks here: http://www.visioni2i.se/kf_css/This is the Html code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="css/body.css" rel="stylesheet" type="text/css"><link href="css/layout.css" rel="stylesheet" type="text/css"></head><body><div id="container"> <div id="bgTopShadow"></div> <div id="bgLeftShadow"></div> <div id="bgStartLeft"><div id="introtext"> <div id="logoStart"><img src="images/logo_start.gif" alt="Kristallforum Logotyp" width="236" height="62" /></div> <p class="vittext"> <br> Vi hälsar er välkomna till våra butiker. Härkan ni i lugn och ro välja ut er favoritmodell ur vårt stora sortiment av egentillverkade kristallkronor av hög kvalitet. Vi har även större kronor som passar i hem med högre tak höjd, restauranger, hotell, teatrar m.m.<br /><br /> <span class="vittext"> <a href="om_kristallforum.html" class="vittext"><strong>Välkommen in >> </strong></a></span></p> <div id="erbjudandeStart"><img src="images/erbjudande.gif" alt="erbjudande" width="118" height="116" /></div></div> </div> <div id="bgStartRight"></div> <div id="bgRightShadow"></div> <div id="bgBottomShadow"></div></div> </body></html> This is the CSS code: #container { width: 750px; MARGIN-LEFT: auto; MARGIN-RIGHT: auto; margin-top: 20px; } #bgTopShadow { float:left; width: 750px; height: 7px; background:url(top_shadow.gif) no-repeat; } #bgLeftShadow { float:left; width: 7px; height: 424px; background:url(left_shadow.gif) repeat-y; } #bgStartLeft { float:left; width: 430px; height: 424px; background:url(bg_start.gif) repeat-x; padding:0px; }#bgStartRight { float:left; width: 306px; height: 424px; background:url(krona_start.jpg) no-repeat; }#bgRightShadow { float: left; width: 7px; height: 424px; background: url(right_shadow.gif) repeat-y; } #bgBottomShadow { float: left; width: 750px; height: 7px; background:url(bottom_shadow.gif) no-repeat; } #introtext { width: 350px; position:relative; top: 40px; padding: 0; margin: 0 auto; } #logoStart { margin: 0 auto; width: 236px; } #erbjudandeStart { float: right; } Can anyone please help me?