Web Design Forums

flashyhorsefoto · 21-02-2007, 23:44

Hello,

I am having a few problems with the layout of my page here. I need the left and right columns to expand all the way to the footer and show the bg image. I do not want to set a height because this is supposed to be a template that works for each page on the site and will expand/contract with font size changes. IE shows the divs but does not expand them, and FF simply does not acknowledge them at all?!

The site reads:
<body>
<h1 class="positioning">Eng Performance Horses</h1>
<div id="banner" class="positioning">
</div>
<div id="wrapper" class="positioning">

<div id="secondarywrap">
<div id="paperleft">
</div>
<div id="container">
<ul>
<li class="first"><a href="#">Bardells Hired Hand</a></li>
<li><a href="#">Firen Ice</a></li>
<li><a href="#">Babies</a></li>

<li><a href="#">Sales</a></li>
<li><a href="#">Training</a></li>
</ul>
Main content here. Main content here. Main content here. Main content here. Main content here.<br />Main content here. Main content here. Main content here. Main content here. Main content here.<br />Main content here. Main content here. Main content here. Main content here. Main content here.<br />Main content here. Main content here. Main content here. Main content here. Main content here.
<ul>
<li class="first"><a href="#">Home</a></li>

<li><a href="#">Xtreme Equine Sports Massage Therapy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="paperright">
</div>
</div>

<div id="footer" class="positioning"></div>
</body>
And the CSS:
@import url("menustyle-2.css");
body {
background-color: #5a350d;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #ebd9a7;
margin-top: 0px;
}
.positioning {
width: 900px;
left: auto;
right: auto;
position: relative;
left: 50%;
margin-left: -450px;
}
.clear {
clear: both;
}
h1 {
height: 125px;
padding-bottom: 15px;
background: url(graphics/engph.gif) no-repeat center;
text-indent: -9000px;
}
#banner {
width: 900px;
height: 35px;
background-image: url(graphics/papertop.gif);
}
#wrapper {
float: left;
width: 900px;
visibility: visible;
}
#secondarywrap {
float: left;
width: 865px;
background: url(graphics/fhf-suede1.gif);
}
#paperleft {
float: left;
width: 35px;
background: url(graphics/burntedge-l.gif) repeat-y left;
}
#paperright {
float: right;
width: 35px;
background: url(graphics/burntedge-r.gif) repeat-y;
}
#container {
float: right;
width: 830px;
background-image: url(graphics/fhf-suede1.gif);
}
#footer {
clear: both;
width: 900px;
height: 35px;
background-image: url(graphics/paperend.gif);
}
more css:
/* link styles */
ul {
margin: 0px;
padding: 0px;
list-style: none;
width: 730px;
float: left;
}
ul li {
float: left;
background: url(graphics/brand.gif) no-repeat left center;
}
ul .first a {
background: none;
}
ul a {
display: block;
padding-left: 36px;
padding-right: 10px;
line-height: 50px;
font-weight: bolder;
text-decoration: none;
color: #5a350d;
}
ul a:hover {
display: block;
padding-left: 36px;
line-height: 50px;
font-weight: bolder;
text-decoration: none;
color: #4c4028;
}

Obviously these are not the only problems that I am having right now, but certainly the most damaging one and I am hoping that once we get this fixed, I can move on to the other problems.

Sorry for the long winded post...it would not let me just give the url's to it.

THANK YOU in advance!!!

kwills · 22-02-2007, 03:25

Any chance of a Screenshot / Link?

Jayx · 22-02-2007, 05:42

Post us a link and just leave out the http://www - we can copy|paste that and help.

skyrocket · 22-02-2007, 06:22

firefox likes elements to have height measurements most times to display stuff. have a play with that. also - use different colour backgrounds and borders on your divs and block level elements so you can see where things are breaking. all i can see is a sea of brown. there seems to be a lot of floating going on there which you most likely don't need. post a url if you want folks to give you a better answer than this.

flashyhorsefoto · 22-02-2007, 12:06

OK, sorry guys...I tried posting the url yesterday and it would not let me:

engperformancehorses.com/redone.htm

and the CSS files are located:

engperformancehorses.com/layout-2.css
engperformancehorses.com/menustyle-2.css

But, if you have the FF plug in, then of course you wont need those.

Thank you so much for the help...I have just really come to a blank in ideas.

flashyhorsefoto · 22-02-2007, 12:09

And also,

Yes, I am somewhat new to CSS...I have used it for styling for quite a while without knowing really what I was doing, but when I realized how powerful it could really be, I decided that I needed to learn this stuff. So I know that I have more mark up and floating going on then is really needed, but I am still working out the kinks and doing my best to understand how it all comes together.

Thank you for your patience!

flashyhorsefoto · 23-02-2007, 22:18

2Dfruit · 23-02-2007, 22:37

your layout is a simple one, and it looks like you haven't really planned it out. When coming up with a css layout, take a breather...think about what you need and get crackin. I would have done it like so:

1) main wrapper start
2) header
3) content wrapper
- the map graphic (top)
3.2) wrap for your contents bg
3.3) another wrap
- top nav
- content
- bottom nav
4) footer (I like to keep it separate)
main wrapper finish

that way you can plan it pixel perfect and it's really simple to code. Keep it together man...

flashyhorsefoto · 24-02-2007, 00:03

2DFruit...Thank you for the heads up! This makes lots of sense to me. I don't know much about CSS yet, but I do know that I still have too much going on and that my code should be much more simple. However, I am still working out the kinks! I am going to give this yet another try right now...Thank you for the help!

21-02-2007, 23:44	#1 (permalink)
flashyhorsefoto Ambitious Newbie Join Date: Feb 2007 Location: Heppner, Oregon Posts: 6	DIV repeat bg???? Hello, I am having a few problems with the layout of my page here. I need the left and right columns to expand all the way to the footer and show the bg image. I do not want to set a height because this is supposed to be a template that works for each page on the site and will expand/contract with font size changes. IE shows the divs but does not expand them, and FF simply does not acknowledge them at all?! The site reads: <body> <h1 class="positioning">Eng Performance Horses</h1> <div id="banner" class="positioning"> </div> <div id="wrapper" class="positioning"> <div id="secondarywrap"> <div id="paperleft"> </div> <div id="container"> <ul> <li class="first"><a href="#">Bardells Hired Hand</a></li> <li><a href="#">Firen Ice</a></li> <li><a href="#">Babies</a></li> <li><a href="#">Sales</a></li> <li><a href="#">Training</a></li> </ul> Main content here. Main content here. Main content here. Main content here. Main content here.<br />Main content here. Main content here. Main content here. Main content here. Main content here.<br />Main content here. Main content here. Main content here. Main content here. Main content here.<br />Main content here. Main content here. Main content here. Main content here. Main content here. <ul> <li class="first"><a href="#">Home</a></li> <li><a href="#">Xtreme Equine Sports Massage Therapy</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <div id="paperright"> </div> </div> <div id="footer" class="positioning"></div> </body> And the CSS: @import url("menustyle-2.css"); body { background-color: #5a350d; font-family: Georgia, Times New Roman, Times, serif; font-size: 14px; color: #ebd9a7; margin-top: 0px; } .positioning { width: 900px; left: auto; right: auto; position: relative; left: 50%; margin-left: -450px; } .clear { clear: both; } h1 { height: 125px; padding-bottom: 15px; background: url(graphics/engph.gif) no-repeat center; text-indent: -9000px; } #banner { width: 900px; height: 35px; background-image: url(graphics/papertop.gif); } #wrapper { float: left; width: 900px; visibility: visible; } #secondarywrap { float: left; width: 865px; background: url(graphics/fhf-suede1.gif); } #paperleft { float: left; width: 35px; background: url(graphics/burntedge-l.gif) repeat-y left; } #paperright { float: right; width: 35px; background: url(graphics/burntedge-r.gif) repeat-y; } #container { float: right; width: 830px; background-image: url(graphics/fhf-suede1.gif); } #footer { clear: both; width: 900px; height: 35px; background-image: url(graphics/paperend.gif); } more css: /* link styles */ ul { margin: 0px; padding: 0px; list-style: none; width: 730px; float: left; } ul li { float: left; background: url(graphics/brand.gif) no-repeat left center; } ul .first a { background: none; } ul a { display: block; padding-left: 36px; padding-right: 10px; line-height: 50px; font-weight: bolder; text-decoration: none; color: #5a350d; } ul a:hover { display: block; padding-left: 36px; line-height: 50px; font-weight: bolder; text-decoration: none; color: #4c4028; } Obviously these are not the only problems that I am having right now, but certainly the most damaging one and I am hoping that once we get this fixed, I can move on to the other problems. Sorry for the long winded post...it would not let me just give the url's to it. THANK YOU in advance!!!

23-02-2007, 22:18	#7 (permalink)
flashyhorsefoto Ambitious Newbie Join Date: Feb 2007 Location: Heppner, Oregon Posts: 6	bump

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

22-02-2007, 03:25	#2 (permalink)
kwills Now Freelance! Join Date: Aug 2006 Location: Warrington, UK Posts: 476	Any chance of a Screenshot / Link?

22-02-2007, 05:42	#3 (permalink)
Jayx Now with added sarcasm. Join Date: Aug 2006 Location: George, South Africa Posts: 351	Post us a link and just leave out the http://www - we can copy\|paste that and help.

22-02-2007, 06:22	#4 (permalink)
skyrocket SkyRocket Design Join Date: Aug 2005 Location: Chichester Posts: 536	firefox likes elements to have height measurements most times to display stuff. have a play with that. also - use different colour backgrounds and borders on your divs and block level elements so you can see where things are breaking. all i can see is a sea of brown. there seems to be a lot of floating going on there which you most likely don't need. post a url if you want folks to give you a better answer than this.

22-02-2007, 12:06	#5 (permalink)
flashyhorsefoto Ambitious Newbie Join Date: Feb 2007 Location: Heppner, Oregon Posts: 6	OK, sorry guys...I tried posting the url yesterday and it would not let me: engperformancehorses.com/redone.htm and the CSS files are located: engperformancehorses.com/layout-2.css engperformancehorses.com/menustyle-2.css But, if you have the FF plug in, then of course you wont need those. Thank you so much for the help...I have just really come to a blank in ideas.

22-02-2007, 12:09	#6 (permalink)
flashyhorsefoto Ambitious Newbie Join Date: Feb 2007 Location: Heppner, Oregon Posts: 6	And also, Yes, I am somewhat new to CSS...I have used it for styling for quite a while without knowing really what I was doing, but when I realized how powerful it could really be, I decided that I needed to learn this stuff. So I know that I have more mark up and floating going on then is really needed, but I am still working out the kinks and doing my best to understand how it all comes together. Thank you for your patience!

23-02-2007, 22:37	#8 (permalink)
2Dfruit Biscuit Join Date: Jun 2006 Location: Ireland Posts: 976	your layout is a simple one, and it looks like you haven't really planned it out. When coming up with a css layout, take a breather...think about what you need and get crackin. I would have done it like so: 1) main wrapper start 2) header 3) content wrapper - the map graphic (top) 3.2) wrap for your contents bg 3.3) another wrap - top nav - content - bottom nav 4) footer (I like to keep it separate) main wrapper finish that way you can plan it pixel perfect and it's really simple to code. Keep it together man...

24-02-2007, 00:03	#9 (permalink)
flashyhorsefoto Ambitious Newbie Join Date: Feb 2007 Location: Heppner, Oregon Posts: 6	2DFruit...Thank you for the heads up! This makes lots of sense to me. I don't know much about CSS yet, but I do know that I still have too much going on and that my code should be much more simple. However, I am still working out the kinks! I am going to give this yet another try right now...Thank you for the help!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)