Jump to content

Getting layouts right?


Bogey
 Share

Recommended Posts

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

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).

Edited by ShadowMage
Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...