Jump to content

css "have to set height won't auto"


Allar

Recommended Posts

site http://allar.cmccd.net

 

html
 

<style type="text/css">
@import url("template.css");
</style>

<div class="root">
	<div class="header-wrap">
    	<div class="header">

			<?php print render($page['header']); ?>
        </div>
    </div>
    <div class="subheader-wrap">
     	<div class="subheader">
        	<div class="nav-border-left"></div>
            <div class="nav-wrap">
				<div class="navlink">

                <?php if (isset($logo)): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo" class="logo">
    <img src="<?php print $logo; ?>" alt="Jean & Tony’s Place  a family website" height="50px" width="150px"/>
  </a>
<?php endif; ?>


					<?php print theme('links', array('links' => $main_menu))?>
                </div>
        	</div>
            <div class="nav-border-right"></div>
        </div>

    </div>
    <div class="body-wrap">
    	<div class="body">
        	<div class="content-border-left"></div>
        	<div class="content-wrap"><?php print render($page['content']); ?></div>
            <div class="content-border-right"></div>
        </div>
    </div>
    <div class="subfooter-wrap">
    	<div class="subfooter">
        	<div class="subfooter-border-left"></div>
        	<div class="subfooter-content-wrap"></div>
            <div class="subfooter-border-right"></div>
        </div>
    </div>
    <div class="footer-wrap">
    	<div class="footer"><?php print render($page['footer']); ?></div>
    </div>
</div>

css:

.header-wrap,
.subheader-wrap,
.body-wrap,
.subfooter-wrap,
.footer-wrap {float:left; width:100%; clear:both; background:#000;}

.header,
.subheader,
.nav,
.body,
.subfooter,
.footer {width:1100px; margin:0 auto;}

.body {float:none;}
/* needs a height*/

.header {height:50px; width:960px;}

.nav-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/topleft-wire.png) no-repeat right;}
.nav-wrap{float:left;celar:both; width:960px;height:70px;}
.nav-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/topright-wire.png) no-repeat;}


.content-border-left {float:left;clear:left; height:100%; width:70px; background:url(files/images/left-wire.png) repeat-y;}
.content-wrap{float:left;width:960px; color:#FFF; font-family:Lucida Grande, Verdana, sans-serif;}
.content-border-right {float:left;clear:right; width:70px; background:url(files/images/right-wire.png)repeat-y;}



.subfooter {height:70px;}

.subfooter-border-left {float:left;celar:both; height:70px; width:70px; background:url(files/images/bottomleft-wire.png) no-repeat right;}
.subfooter-content-wrap{float:left;celar:both; width:960px;height:70px; background:url(files/images/bottom-wire.png);}
.subfooter-border-right {float:left;celar:both;height:70px; width:70px; background: url(files/images/bottomright-wire.png) no-repeat;}

.links{margin:0;padding:0;}
.navlink {}
.navlink li {display:inline;}
.navlink a {float:left; height:33px;font-weight:bold;line-height:32.75px; 'Times New Roman', Times, serif; font-size:16px;padding:0 25px; color:#FFF;text-align:center; border-right:1px solid #FFF;text-decoration:none; text-shadow:0px 1px 0px #185edf;}
.navlink a:hover {background:url(/sites/all/themes/ssccix/files/nav-arrow.png) no-repeat center top; text-decoration:none;}
.navlink a.active {background:#FFF; no-repeat center top;color:#091342;}


.footer {}

/*.border-left {float:left;height:100%;clear:left; width:2px; background:#fff;}
.content-wrap{float:left;height:100%; width:960px; background:#555;}
.border-right {float:left;height:100%;clear:right; width:2px; background:#fff;} */


The problem is that as you see the site the content is pushed to the left and the white borders on the left and right disappear, though they will show up if i have a pre-set height in the .body{} but than it will not auto height for the text.
any ideas on the problem?

 

Link to comment
Share on other sites

I think you can get rid of the white area around the parameter by using: body {margin: 0; padding: 0;} note this is not .body. I'm at a loss about the white borders on the left and right.

Were did you get this code from?

what white area? the white is the border on the top and bottom, also i wrote it for a drupal theme

Link to comment
Share on other sites

Sorry I miss read your first post, I thought you said you had two problems. My bad.

Anyway YOU wrote it in a drupal theme? I counted 29 divs in your html, if you need them good, if not why have them.

Have you drawn out the basic look of your web page?

I got 15 errors in your html here http://validator.w3.org/ and 10 errors in your css here http://jigsaw.w3.org/css-validator/, and you should book mark these two sites. These errors can effect how your web page is displayed.

I don't know but it looks like you made it harder than it needs to be, there are sharper people here and on other sites maybe they can help you.

Link to comment
Share on other sites

okay so i rewrote it trying to use less divs

here is what i got though now the subheader wont align properly

 

HtML:

<link href="template.css" rel="stylesheet" type="text/css">

<div class="root">
	<div class="header-wrap">
    	<div class="header"></div>
    </div>
    <div class="subheader-wrap">
   		<div class="subheader">
        	<div style="float:left; height:50px; width:32px; border-bottom:2px solid #FFF"></div>
         	<div class="logo">
          	<img src="../aaronallar/files/images/logo.jpg" alt="Aaron ALlar" height="50px" width="150px" />
          	</div>
        <div class="nav">Home|About|project|</div>
    	</div>
    </div>
    <div class="body-wrap">
      <div class="body">sd</div>
  </div>
    <div class="subheader-wrap">
    	<div class="subfooter"></div>
    </div>
    <div class="footer-wrap">
    	<div class="footer"></div>
    </div>
</div>
				
                
                

css:

body {background:#000; color:#FFF;}

.header-wrap,
.subheader-wrap,
.body-wrap,
.subfooter-wrap,
.footer-wrap {float:left; width:100%; clear:both;}

.header,
.subheader,
.body,
.subfooter,
.footer {width:960px; margin:0 auto;}

.subheader{height:50px;}
.logo {float:left;}
.nav {float:left;  width:auto; padding-top:34px; padding-left:25px;font-weight:bold; 'Times New Roman', Times, serif; font-size:16px;}

.body {width:960px; background:#333; border-left:2px solid #FFF; padding-left:30px; border-right:2px solid #FFF; padding-right:30px;border-bottom:2px solid #FFF; padding-bottom:30px;padding-top:30px;}
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.