• 0

Annoying CSS problem


Question

Usually i'm alright with CSS, but this bit is just stumping me something rotten!

Have a look at http://beta.danstyan.co.uk/about where the blue bar with About is, it should sit above the content area with a margin on 15px from the top curve, I've no idea why it's not doing it.

If I remove float:left from one of my CSS's it works fine, but then I get another problem where the div with the 'i' inside it, will go somewhere else.

I will admit I easily get confused with floatings and clearings on CSS, when I mean I get confused I have no idea, but will keep trying and it'll work.

If you go to http://danstyan.co.uk you'll see what I mean about the spacing.

Whats more annoying is I think the CSS may be right, because if you scroll down I put the same code in my footer and it looks alright there :/

Thanks! I will make sure :santa: gives you good pressies

By the way, the site is fully xhtml strict and css valid (comes up with some errors as I've used a div id more than once, but only for testing)

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

It doesn't look like you're clearing your floats properly :\.

<div id="subnavheader"></div>

<div id="subouter">
<div id="subrap">
<div id="subnavigation1">
About.
</div>

<div class="subnavigation">
<ul>
	<li class="page_item page-item-8"><a href="http://beta.danstyan.co.uk/about/me" title="Me">Me</a></li>

<li class="page_item page-item-19"><a href="http://beta.danstyan.co.uk/about/setup" title="Setup">Setup</a></li>
<li class="page_item page-item-17"><a href="http://beta.danstyan.co.uk/about/software" title="Software">Software</a></li>
<li class="page_item page-item-15"><a href="http://beta.danstyan.co.uk/about/favourites-sites" title="Favourites Sites">Favourites Sites</a></li>
<li class="page_item page-item-11"><a href="http://beta.danstyan.co.uk/about/hobbies-interests" title="Hobbies & Interests">Hobbies & Interests</a></li>

</ul>
</div>
<div id="subnavfooter"></div>
</div>
</div>
<div id="search">i</div>

That can also be really simplified. Have you put thought into using CSS3 for your rounded corners versus relying on images? That would take out some of the extra code you've got.

 <div class="subnav clearfix">
     <div class="subnav-l">
         <h1 class="subnav-title"><?php the_title(); ?></h1>
         <?php wp_nav_menu( array('menu' => 'Subpages' )); ?>
    </div>
    <div class="subnav-r">
       <h2 class="subnav-i">i.</h2>
    </div>
 </div>

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.subnav-l {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
}

Link to comment
Share on other sites

  • 0

Hi,

I put a height on subouter which has made a difference as it's almost where it should be, but my other div (search) is sitting below again.

Sorry cupcakes I know you've done a great job there, but I've changed the code again, mind taking a look again (sorry :( )

I have thought about css3, but is widely accepted in browsers yet? But I will get round to doing it soon though :D

Link to comment
Share on other sites

  • 0

Ah excellent, will give that a try one weekend.

But atm this bit is annoying it, I know it'll be a easy bit of CSS somewhere, but like I said earlier I'm about as good as a chocolate fireguard when it comes to floats & clearings

Link to comment
Share on other sites

  • 0

Here: http://dev.icupcake.org/neowin/danstyan.html

That's my example from earlier in working form. You can see in my inline style that I just added some quick CSS for my HTML version (using border-radius as well.) I didn't style anything in the boxes since neither were apart of the problem.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.subnav {
	margin: 15px 0 0 0;
}
	.subnav-l {
		float: left;
		width: 670px;
		height: 135px;
		background: #DFE6FF;
   	 	border-radius: 5px;
   	 	-webkit-border-radius: 5px;
   	 	-moz-border-radius: 5px;
   	 	-khtml-border-radius: 5px;
	}
	.subnav-r {
		float: right;
		width: 250px;
		height: 135px;
		background: #DFE6FF;
   	 	border-radius: 5px;
   	 	-webkit-border-radius: 5px;
    	   	-moz-border-radius: 5px;
    	   	-khtml-border-radius: 5px;
	}

<div class="subnav clearfix">
	<div class="subnav-l">
		<h1 class="subnav-title1">About.</h1>
		<ul class="subnav-menu">
			<li class="page_item page-item-8"><a href="http://beta.danstyan.co.uk/about/me" title="Me">Me</a></li> 
		</ul>
	</div>
	<div class="subnav-r">
		<h2 class="subnav-title2">i</h2>
	</div>
</div>

Link to comment
Share on other sites

  • 0

Looks good, what about the bit where it says "me" as thats underneath 'about'

I had that as a seperate div as it's 3 divs

goes <Page title><subpages><search box>

the actually php and xhtml is as follows

&lt;div id="subnavheader"&gt;&lt;/div&gt;

&lt;div id="subouter"&gt;
&lt;div id="subrap"&gt;
&lt;div id="subnavigation1"&gt;
&lt;?php
$parent_title = get_the_title($post-&gt;post_parent);
echo $parent_title;
?&gt;.
&lt;/div&gt;

&lt;div class="subnavigation"&gt;
&lt;ul&gt;
&lt;?php
	$subpages = ($post-&gt;post_parent) ? wp_list_pages('title_li=&amp;child_of='.$post-&gt;post_parent.'&amp;echo=0') : wp_list_pages('title_li=&amp;child_of='.$post-&gt;ID.'&amp;echo=0') ;
	if ($subpages)
	{
?&gt;
	&lt;?php echo $subpages; ?&gt;

&lt;?php
	}
?&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div id="subnavfooter"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="search"&gt;i&lt;/div&gt;

Link to comment
Share on other sites

  • 0

Well, what about it? I wasn't going to restyle the 'About' and unordered list when it's not an issue. The issue you had was that you aren't clearing your floats and your code is bloated. All I did was clean up the HTML/CSS and fix your float issue.

Just readd your WordPress functions where they would go. My version is just static HTML, thus why I removed some the of list items. Was irrelevant to what I was doing.

Link to comment
Share on other sites

  • 0

I've mananged to move the menu from the left to where I want it to be, however it's still quite low down.

So I done the following

margin-top:-100px;

to me this seems more an a 'hack' and isn't natural, would this work cross browsers or is there another way?

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.