css help
- Started
- Last post
- 25 Responses
- forcetwelve
anyone have a minute to help me out with something?
- acescence0
and what would that be?
- forcetwelve0
so i have a layout in html (that i'm getting ready to put into wordpress) which looks like this:
------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>-</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen,projection" /></head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li><a href="#">Link Here</a></li>
<li><a href="#" class="active">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
<li><a href="#">Link Here</a></li>
</ul>
</div><!-- header -->
<div id="content">
<div id="feature_wrapper">
<div id="feature_left"></div><!-- feature left -->
<div id="feature_right">
<div id="box1" class="box_header">
<a href="gallery.html"><img src="images/feature_right.jpg"></a>
<a href="gallery.html">SECOND BOX</a>
</div><!-- box1 --><div id="box2" class="box_header">
<a href="gallery.html"><img src="images/feature_right2.jpg"></a>
<a href="gallery.html">SECOND BOX</a>
</div><!-- box2 --></div><!-- feature right -->
</div><!-- feature_wrapper -->
<div id="secondary">
<div id="news_wrapper">
<a href="gallery.html"><h1>NEWS HEADING</h1></a>
<div id="line_big"></div><!-- line_big --><div id="news_item">
<a href="gallery.html"><h2>News item Heading</h2></a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- news_item --></div><!-- news_wrapper -->
<div id="column1">
<a href="gallery.html"><h1>in season</h1></a>
<div id="line_column"></div><!-- line_coulmn -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- column1 --><div id="column2">
<a href="gallery.html"><h1>our details</h1></a>
<div id="line_column"></div><!-- line_coulmn -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- column2 --></div><!-- secondary -->
<div class="clearfooter"></div></div><!-- content -->
</div><!-- wrapper -->
<div id="footer">
<img src="images/footer_logo.png">
</div><!-- footer --></body>
</html>
- forcetwelve0
actually - link is easier
- forcetwelve0
i can't get the body to go 100% height. i'm not sure where i need to be putting the clear floats in.
if someone can explain how they work in a nested layout like this i'd be very grateful.
- mydo0
i helped you yesterday. you owe me carrots.
- i'm happy to help anyone on matters that i may be more skilled in.forcetwelve
- i'm new to this css bizzo.forcetwelve
- i would help. but i'm not very good at CSS to be honest.mydo
- forcetwelve0
usually the body div goes all the way to the bottom of the browser. here's a grab from cssedit.
- noiseisthis0
post up an image of what the whole layout is suppose to look like
- acescence0
not sure i understand the issue, looks ok here
- noiseisthis0
and what do you mean by the body div? the wrapper div?
- yeah the body div. i'm using this technique: http://fortysevenmed…forcetwelve
- forcetwelve0
it's looking basically correct, except i am getting scroll bars on the vertical, instead of the footer sticking at the bottom.
is the way i have nested divs ok there? or is it too complex?
- acescence0
works ok in safari / chrome / ff here, too lazy to fire up my windows box. perhaps your viewport height is just less than the height of all of the elements combined?
- yeah ok. thx. does the way i am nesting divs look ok though?forcetwelve
- acescence0
- thx mate. so i'm not as far off as i thought.forcetwelve
- Stugoo0
here is an analofy on clear and float.
if something is floating is hanging left and right but its also trying to float away. think of a clear as a weight that you put at the bottom to stop the div flying away :)
or im jsut really tired
- forcetwelve0
the saga continues. i'm trying to get this footer to work. it's split up into 3 divs. i can't get it to stay at the bottom of the window. any ideas?
- waynomatic0
perhaps this might help:
- the author uses a specific padding-bottom value, then put's a negative relative position value of the same increment on the footer.waynomatic
- increment to the footerwaynomatic
- thank you. thank you.forcetwelve
- try switching your 101px margin to padding instead?waynomatic
- the method you used looks almost identical to the one I suggested except for the margin vs. paddingwaynomatic
- forcetwelve0
now i have it in wordpress - and the footer doesn't go full width!? this is beginning to shit me. anyone have any idea why? thx in advance.
- acescence0
in your other version footer was outside wrapper, in this one it's inside.
- Amicus0
don't forget to make 'SouthSouthWest' clickable... and bold, and make the logo bigger. :)
- Moenen0
add:
html {height:100%;}
- forcetwelve0
now i can't get my custom field image to display - i need to have a loop inside a loop - but i'll be buggered if i know where??
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="content" class="clearfix"><div id="feature_wrapper">
<div id="feature_sub"><?php include (ABSPATH . '/wp-content/plugins/wp-featured-content-slider/content-slider.php'); ?></div><!-- feature_sub -->
</div><!-- feature_wrapper -->
<div id="left_column">
<?php the_content(); ?>
</div><!-- left_column -->
<div id="right_column">
<?php echo get_post_meta($post->ID, 'right_image', true); ?>
</div><!-- right_column -->
<?php endwhile; else: ?>
<?php endif; ?>
</div><!-- content -->
<?php get_footer(); ?>