Some layout issues

Question

juliagarrett 0 Newbie Poster

14 Years Ago

Hello,

I am trying to get text to flow next to the nav bar, not behind it. I have tried a few things with not-too-ideal results. I also find that the dividers start stretching past the layout edge rather then going down to the next line even when I set width and height values.

Please advise.
Thanks. Julia

CCS 

@charset "utf-8";
/* CSS Document */
#head {
	position:absolute;
	width:870px;
	height:206px;
	z-index:1;
	left: 0;
	top: 0;
	background-image: url(headbot.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	color: #402000;
	text-align: center;
	letter-spacing: 5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	
}
#content {
	position:absolute;
	text-align:inherit;
	width:870px;
	height:452px;
	z-index:2;
	left: 0px;
	top: 206px;
	background-color: #633;
	background-image:url(contentBGimag2e.gif);
	background-repeat:no-repeat;
	font-family: Verdana, Geneva, sans-serif;
	background-position: center;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
}

.navbar {
	background-color:#633;
	position: absolute;
	height: 279px;
	width: 153px;
	left: 0px;
	top: 0px;
	border-right: 0px solid #000;
	margin-bottom: 0em;
	font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
	background-color: #633;
	color: #633;
	text-align: left;
	letter-spacing: 2px;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0em;
	padding-left: 0;
}

#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#navcontainer li
{
	margin: 0;
	border-bottom-width: 0px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}

#navcontainer li a
{
	display: block;
	color: #fff;
	text-decoration: none;
	width: 99%;
	background-color: #402000;
	border-right-width: 8px;
	border-left-width: 8px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #000;
	border-left-color: #000;
	border-bottom-color: #000;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #000;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 0.5em;
	float: none;
	clear: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
	background-color: #000;
	color: #fff;
	border-right-width: 10px;
	border-left-width: 10px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #633;
	border-left-color: #633;
}

body {
	background-color: #FFFFFF;
	background-image:url(backgroundstripe.jpg);
	background-repeat:repeat-x;
}


#foot {
	position:absolute;
	width:870px;
	height:50px;
	z-index:3;
	left: 0px;
	top: 655px;
	background-color:#633;
	padding-top: 0px;
	margin-top: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: center;
	font-size: 10px;
}

#wrapper {
	width: 870px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	left: 0px;
	top: 0px;	
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Welcome to Barrett Golf Resorts U.K</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<!--

-->

<link href="../externalsheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

-->
</style>
<meta name="Keywords" content="golf, barretts, resorts, scotland, gleneagles, aberdeen, luxury" />
</head>

<body>
<div id="wrapper">
<div id="head"><img src="../headtop.jpg" alt="golf resort image" width="870" height="153" />
<div>
Barrett's Premier Golf Resorts, Scotland.</div>
</div>
<div id="content">


<div class="navbar">
  <div id="navcontainer">
    <ul id="navlist">
      <li id="active"><a href="#" id="current">Home</a></li>
      <li><a href="#">Resorts</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Photographs</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Other Services</a></li>
      <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  
  
</div>
</div>

<div id="foot"> Designed</div>
<div class="content">Content for  class "content" Goes Here</div>
</div>
</body>
</html>

web-design

4 Contributors
4 Replies
143 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by MidiMagic

All 4 Replies

JugglerDrummer 0 Junior Poster

14 Years Ago

Make the image less wide, put the text in a div, and position the div next to the img within the #head div by setting its top bottom and left properties to 0px.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

juliagarrett 0 Newbie Poster · Answer 1 · 2009-12-27T05:42:39+00:00

Make the image less wide, put the text in a div, and position the div next to the img within the #head div by setting its top bottom and left properties to 0px.

This didn't work, also resizing the head image really hurts the appearance of the page.

Maybe I did something wrong. Can you demonstrate what you mean?

Julia

ko ko 97 Practically a Master Poster · Answer 2 · 2009-12-27T11:40:31+00:00

Remove absolute property to head, and give it normal flow. If it absolute position, it was out of normal flow and it left no space in it's parent. So, the element after the head(in your code, a text with div) was move to top it was overlap by the head, because the head div was flow first in the document. You can give z-index to control the layer which is upper or below. Otherwise, you want to see the text next to the head div, you can give the top margin to the text container, same with the height of head div,(in your css, the head div was 206px), so the top margin of text container must be at least 206px or higher.
If you want the text appear on the head div, you can give the z-index to the head div, default is 0. In your code, the z-index of the head div was 1, and the text container was not set, and it has default 0. So, the head div was upper of the text container and the text is behind of it. You need to change negative value instead of 0. Like this:

#head {
      z-index: -1000
     }

This is all I understand of your question. Good luck Julia.

MidiMagic 579 Nearly a Senior Poster · Answer 3 · 2010-01-03T05:44:23+00:00

Position absolute causes computers with different screen resolutions to totally mess up the rendering. On top of that, IE renders it wrong. Never use it.

Any time you define something in pixels or absolute positioning that exceeds the window size, stuff like that happens. Use relative positions and percentage widths.

Some layout issues

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers