Bogey Posted July 25, 2011 Share Posted July 25, 2011 Me again :)Two questions (first is simple to answer I guess, but can't get it right)1.) I have 2 divs next to each other, width 15% and 85%, that works fine! BUT, I want to change the 15% in px-size, and the rest have to be the second div, but dont know what to fill in for width of 2nd div, cause the % is unknown, and the pix also unknown...2.) My layout has to be like this:- header (width 100%, height 15%)mid section has 2 divs:- navigation (width 15%, height 75%)- main (width 85%, height 75%) (has to been changed due to answer in question 1 hahaha)- footer (width 100%, height 10%)In Chrome it looks PERFECT.BUT in the otherones (FF, Opera, IE, Safari) every browser fails to show it like that, there I see:Internet Explorer (7):-header-navigation (with empty space next to it, 85%)-footer-empty space width 15%, with the 85%main next to itSo the main-div hasn't been placed next to the navigation-div, but below the footer-div.FF, O and S:-header-navigation (with empty space next to it, 85%)-footer width15%, with empty space below it , I guess height65%. Main next to it width 85% height 75%So the main-div hasn't been places next to the navigation-div, but next to the footer-div, even when footer width is set to 100% ?????How can I make layout in all browsers look ok?I hope above makes sense? otherwise I have to make screenshots to make it clear?This is the code managing the div's in my .php file: <div id="header"><?phpinclude ("header.php")?></div><div id="middle"> <div id="navigation"> <button class="button_nav" id="button_home" style="width:125px;height:40px;" name="home" onClick="button_home()" > Home</button><br /> <button class="button_nav" id="button_ik" style="width:125px;height:40px;" name="wie_ben_ik" onClick="button_ik()" > Wie ben ik?</button><br /> <button class="button_nav" id="button_werkzaamheden" name="werkzaamheden" onClick="button_werkzaamheden()" > Werkzaamheden</button><br /> <button class="button_nav" id="button_contact" name="contact" onClick="button_contact()" > Contact</button><br /> </div> <div id="main"> <?php //isset nog toevoegen, zodat pagina start op HOME, maar als andere pagina actief is, en er wordt vernieuwd, dan niet home //maar actieve pagina nog aanwezig include("home.php") ?> </div></div><div id="footer"><?phpinclude ("footer.php")?></div> this is the css-code: <div id="header"><?phpinclude ("header.php")?></div><div id="middle"> <div id="navigation"> <button class="button_nav" id="button_home" style="width:125px;height:40px;" name="home" onClick="button_home()" > Home</button><br /> <button class="button_nav" id="button_ik" style="width:125px;height:40px;" name="wie_ben_ik" onClick="button_ik()" > Wie ben ik?</button><br /> <button class="button_nav" id="button_werkzaamheden" name="werkzaamheden" onClick="button_werkzaamheden()" > Werkzaamheden</button><br /> <button class="button_nav" id="button_contact" name="contact" onClick="button_contact()" > Contact</button><br /> </div> <div id="main"> <?php //isset nog toevoegen, zodat pagina start op HOME, maar als andere pagina actief is, en er wordt vernieuwd, dan niet home //maar actieve pagina nog aanwezig include("home.php") ?> </div></div><div id="footer"><?phpinclude ("footer.php")?></div> Link to comment Share on other sites More sharing options...
ShadowMage Posted July 25, 2011 Share Posted July 25, 2011 Looks like you re-pasted your HTML instead of the CSS.EDIT:Oh, and for your first question. Why do you want to change them to px? If you don't know what the widths will be, there's really no way you can convert % to px... It's probably best to leave them in % so you can target multiple screen resolutions. You can always set min-heights on those elements to keep them from getting too small (or max-height to keep them from getting too large). Link to comment Share on other sites More sharing options...
Bogey Posted July 26, 2011 Author Share Posted July 26, 2011 Oops hehehe .... have to change that yes :)Reason i dont want %, but pix in that div(navigation) is cause when res settings are high, then div width is to wide for the buttons (lot of space on both sides). But with width on pix, then div(main) unpossible to set, cause width unknown...The min and max I was not familiar with, so I think put those in both div's, must do the trick Link to comment Share on other sites More sharing options...
ShadowMage Posted July 26, 2011 Share Posted July 26, 2011 Reason i dont want %, but pix in that div(navigation) is cause when res settings are high, then div width is to wide for the buttons (lot of space on both sides). But with width on pix, then div(main) unpossible to set, cause width unknown...The min and max I was not familiar with, so I think put those in both div's, must do the trick Yeah, that's what the min/max width/height are for... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.