10 Replies - 764 Views - Last Post: 09 April 2011 - 02:36 AM

#1 jagz420i  Icon User is offline

  • New D.I.C Head

Reputation: -13
  • View blog
  • Posts: 26
  • Joined: 18-March 11

Problem with layout :/

Posted 07 April 2011 - 07:43 AM

hey guys..

im making website based on car...and im having problem with the layout..when i maximize the browser everything is on place as i restore down my layout splits out completely.

my html cose

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Advent Car</title>
<link  rel="stylesheet" href="default.css" type="text/css" />
<link  rel="stylesheet" href="table.css" type="text/css" />
<link rel="stylesheet" href="menu/menu_style.css" type="text/css" />
</head>
<body>

<div id="bdy">

<div id="header1">

<img src="images/banner.jpg" />

</div>


<div id="header">

<div  id="menubar">

<div id="left">
	<ul id="menu">
   <li><a href="index.html">Home</a></li>
   <li><a href="webpages/limo.html">Limo</a></li>
   <li><a href="webpages/occasion.html" >Occasion</a></li>
   <li><a href="webpages/booklimo.html" >Book limo</a></li>
   <li><a href="webpages/contactUs.html" >Contact us</a></li>
   <li><a href="webpages/aboutUs.html">About us</a></li>
 	</ul>
</div>
<div id="right">

<div id="img">Member Login</div>

</div>

</div>
</div>

<div id="container">

<div id="submenu">

&nbsp;&nbsp;<h1>Our Special Services</h1>
<ul id="menu2">
<li><a href="">&#x2605 Birthdays</a></li>
<li><a href="">&#x2605 Weddings</a></li>
<li><a href="">&#x2605 School Proms</a></li>


</ul>
<br/><br/>
<img src="images/add1.jpg" />

</div>

<div id="content">

<div id="flash"><embed src="images/AdventcarsBanner2.swf" width="600px" height="300px"></embed></div>

<div id="titleBar"><h3>Home Page</h3></div>

<div id="info"><h2>MAKE THIS SITE XHTML.</h2></div>

<br/><br/><br/><br/>

</div>

</div>

<div id="footer">
<h2>Home|Contact us|About us|Occasions|Book Limo </h2><br/>
<h2>&copy;Advent Car Private Limited Company </h2>

</div>
</div>
</body>
</html>




Here is my CSS code..

body{

	background-image:url(images/b3.jpg);
	max-width:90%;
	min-width:60%;
	margin: 75px;
	padding-left: 50px;
	font-family: Arial, sans-serif;
	font-size: 14px;

}
#bdy{

	min-width:60%;
	max-width:90%;
	width:90%;
	height:auto%;
	border-style:solid;
	border-width:20px;
	border-color:#ffffff;
	-moz-border-radius: 20px;
}
#header1{

	
	background-color:#c0c0c0;
	height:auto;
	
}
#menubar{

	background-color:#333333;
	
	
}
#container{

	margin-top:34px;
	background-color:#a0a0a4;
	height:auto; 
	width:100%;
	
	
}
#submenu{

	width:20%;
	background-color:#808080;
	height:auto;
	float:left;
	
}
#content{
	width:80%;
	background-color:#c0c0c0;
	height:auto; 
	float:right;
}

#footer{
	
	background-color:#808080;
	height:auto;
	text-align:center;
}



h1{
	margin:0px;
	color:#ffffff;
	font-size:16px
}
h2{
	margin:0px;
	color:#ffffff;
	font-size:12px
	
}
h3{
	margin:0px;
	color:#a6caf0;
	
}
#left{
	
	float:left;
	width:50%;
	
}
#right{

	float:right;
	width:50%;
	background-color:#333333;
	height:34px;
	text-align:right;
	
	
}
#img{
	
	color:#ffffff;
	
	
}
#flash{
	
	position:relative;
	left:10%;
	
	
}



Thank you looking forward for your respond

regards

jag

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with layout :/

#2 Creecher  Icon User is offline

  • I don't care
  • member icon

Reputation: 561
  • View blog
  • Posts: 2,049
  • Joined: 06-March 10

Re: Problem with layout :/

Posted 07 April 2011 - 09:04 AM

Seeing as you have images and flash files on your site and have not supplied us with all the CSS files (seeing as you have 3 for some reason), can you upload a live (online) version of what your asking us to look at?
Was This Post Helpful? 0
  • +
  • -

#3 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Problem with layout :/

Posted 07 April 2011 - 09:33 AM

I had this same problem once

REASON

This could happens when your main content div is say 800px wide and you're two divs width inside this main div is also 800px .

SOLUTION


Try making the divs width a bit less.

for e.g


.header{

width:800px;

}

.right{
width:299px;

}

.left{
width:499px;
}



Can you maybe supply us with a link to you're website?
so we can help you out a bit more

greetings

Marinus

This post has been edited by marinus: 07 April 2011 - 09:34 AM

Was This Post Helpful? 0
  • +
  • -

#4 jagz420i  Icon User is offline

  • New D.I.C Head

Reputation: -13
  • View blog
  • Posts: 26
  • Joined: 18-March 11

Re: Problem with layout :/

Posted 07 April 2011 - 09:50 AM

how can i upload it ?..it prob wont work might this screen shoot helps

http://dl.dropbox.co...362/pic%201.jpg

http://dl.dropbox.co...362/pic%202.jpg

Thanks for replay


the first image shows when browser is maximise and second image shows when the browser is resotre down...


but why does it works when is full borwser ?


Oh here is the link for my site

http://dl.dropbox.co...lder/index.html

This post has been edited by jagz420i: 07 April 2011 - 09:54 AM

Was This Post Helpful? 0
  • +
  • -

#5 marinus  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 135
  • View blog
  • Posts: 575
  • Joined: 14-April 10

Re: Problem with layout :/

Posted 07 April 2011 - 10:03 AM

i am guesing that is header1

if so try setting header1 to a fixed width

for e.g
#header1{
width:600px;
}

This post has been edited by marinus: 07 April 2011 - 10:05 AM

Was This Post Helpful? 0
  • +
  • -

#6 jagz420i  Icon User is offline

  • New D.I.C Head

Reputation: -13
  • View blog
  • Posts: 26
  • Joined: 18-March 11

Re: Problem with layout :/

Posted 07 April 2011 - 10:45 AM

hmm yehh i changed that but still doesnt work :/
Was This Post Helpful? 0
  • +
  • -

#7 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Problem with layout :/

Posted 07 April 2011 - 11:06 AM

You're using percentages to define the width of your elements. Your image has a set width. When the browser is re-sized your elements re-size to x% of the browser width while your image stays at its original width.

This post has been edited by D.Mulroy: 07 April 2011 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

#8 jagz420i  Icon User is offline

  • New D.I.C Head

Reputation: -13
  • View blog
  • Posts: 26
  • Joined: 18-March 11

Re: Problem with layout :/

Posted 07 April 2011 - 11:14 AM

ohh so which is better to use percentages or pixcels ?

Thanks
Was This Post Helpful? 0
  • +
  • -

#9 D.Mulroy  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 430
  • Joined: 30-June 10

Re: Problem with layout :/

Posted 07 April 2011 - 12:39 PM

It's really situational, but for you I would definitely suggest pixels.
Was This Post Helpful? 0
  • +
  • -

#10 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 219
  • View blog
  • Posts: 1,605
  • Joined: 20-January 09

Re: Problem with layout :/

Posted 08 April 2011 - 10:07 AM

View Postmarinus, on 07 April 2011 - 10:03 AM, said:

i am guesing that is header1

if so try setting header1 to a fixed width

for e.g
#header1{
width:600px;
}


One thing to always remember is that block level elements are automatically rendered to fill the space. So his container set works fine in this case, not the child div not having a fixed width because it will resize automatically with the parent.

Basically, the less fix widths you can have the better off you will be.
Was This Post Helpful? 0
  • +
  • -

#11 jagz420i  Icon User is offline

  • New D.I.C Head

Reputation: -13
  • View blog
  • Posts: 26
  • Joined: 18-March 11

Re: Problem with layout :/

Posted 09 April 2011 - 02:36 AM

Thanks guys
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1