CSS (Cascading Style Sheets) help

Pages: 1

Index »
Community »
Everything Else »
CSS (Cascading Style Sheets) help

2009-06-14 11:30:31

tupla_s: .; +455|7170|Finland

I need some help with CSS

I'm trying to center the menu (marked with red) to the header, but it's not working.

Could someone who knows CSS better, take a look at the code.

Index

Code:

<!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 profile="http://gmpg.org/xfn/11">

    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />    
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>
    <?php wp_head(); ?>
        
</head>
<body>
<div id="wrapper">
<div id="firefox_fix">
    <?php get_header(); ?>
    <div id="container">
        <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
            <div class="post" id="post-<?php the_ID(); ?>">
                <div class="post_icon">
                    <div class="title"><h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
                    </div>
                </div>
                <div class="entry">
                    <?php the_content(); ?>
                    
                    <p class="postmetadata">
                    <?php _e('Posted in:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?> <?php _e('|'); ?>
                    <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
                    </p>
                </div>
            </div>
        <?php endwhile; ?>
            <div class="navigation">
                <?php posts_nav_link(); ?>
            </div>
        <?php else: ?>
            <div class="post">
                <h2><?php _e('Not Found'); ?></h2>
                <?php _e('Sorry, but you are looking for something that is not here.'); ?>
            </div>
        <?php endif; ?>
    </div>    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
</div>
</div>
</body>
</html>

Header

Code:

<!–[if IE]>
<style type="text/css">
body{ behavior:url("<?php bloginfo(’template_directory’); ?>/csshover.htc"); }
</style>
<![endif]–>

<div id="header">
    <a href="<?php bloginfo("url"); ?>"><div id="banner_link"></div></a>
    <!-- <h1><a href="<?php bloginfo("url"); ?>"><?php bloginfo('info'); ?></a></h1>
    <?php bloginfo ("description"); ?> -->
    <div id="menu">
        <div class="hover-wrap">
                <a href="<?php bloginfo("url"); ?>"><div id="home" class="mouseover"></div></a>
                
            <div class="hover-menu">
                <ul>
                    <?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
                </ul>
            </div>
        </div>
        
        <div class="menu_div"></div>
        
        <div class="hover-wrap">
                <a href="<?php bloginfo("url"); ?>"><div id="blog" class="mouseover"></div></a>
            
            <div class="hover-menu">
                <ul>
                    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=1'); ?>
                </ul>
            </div>
        </div>
        
        <div class="menu_div"></div>
        
        <a href="<?php bloginfo("url"); ?>"><div id="images" class="mouseover"></div></a>
        
        <div class="menu_div"></div>
        
        <a href="<?php bloginfo("url"); ?>"><div id="videos" class="mouseover"></div></a>
    </div>
</div>

CSS

Code:

/*  
Theme Name: Huntteri
Theme URI: huntteri.co.cc
Description: Theme for huntteri website
Version: 1.0
Author: tupla_s
Author URI: huntteri.co.cc

*/

body, h1, h2, h3, h4, h5, h6, blockquote, p{
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
    text-align: center;
    vertical-align: top;
    background: url('images/top_grad.png') repeat-x;
    background-color: #deded5;
    color: #000000;
}

h1{
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px 0;
}

a:link, a:visited {
    text-decoration: none;
    color: #6f7537;
}

a:hover {
    text-decoration: underline;
}

p{
    padding: 10px 0 0 0;
}

#wrapper{
    margin: 0 auto auto auto;
    width: 739px;
    background: url('images/background.png') repeat-y;
    background-color: #bfc0ae;
    text-align: left;
}

#firefox_fix{
    float: left;
    width: 739px;
    background: url('images/background.png') repeat-y;
    background-color: #bfc0ae;
    text-align: left;
}

#header{
    float: left;
    width: 739px;
    height: 150px;
    background: url('images/banner.png') no-repeat;
    text-align: center;
}

#banner_link{
    height: 100px;
    width: 739px;
}

#menu{
    height: 21px;
    min-width: 739px;
    margin: 13px auto auto auto;
    position: relative;
    float: left;
}


.menu_div{
    height: 21px;
    min-width: 6px;
    background: url('images/menu_div.png') no-repeat;
    float: left;
    margin: 0 5px 0 5px;
}

#home{
    min-width: 67px;
    min-height: 21px;
    background: url('images/menu_home.png') no-repeat;
    float: left;
}

#home:hover{
    background-position: 0 -21px;
}

#blog{
    min-width: 51px;
    min-height: 21px;
    background: url('images/menu_blog.png') no-repeat;
    float: left;
}

#blog:hover{
    background-position: 0 -21px;
}

#images{
    min-width: 84px;
    height: 21px;
    background: url('images/menu_images.png') no-repeat;
    float: left;
}

#images:hover{
    background-position: 0 -21px;
}

#videos{
    min-width: 81px;
    height: 21px;
    background: url('images/menu_videos.png') no-repeat;
    float: left;
}

#videos:hover{
    background-position: 0 -21px;
}

.hover-wrap{
position: relative;
}

.hover-wrap .hover-menu{
display: none;
}

.hover-wrap:hover .hover-menu{
display: block;
position: absolute;
top: 20px;
left: 10px;
z-index: 100;
white-space: no-wrap;
}

#container{
    float: left;
    width: 560px;
}

.sidebar{
    background: url('images/sidebar_line.png') no-repeat;
    float: left;
    width: 179px;
}

.sidebar ul, #menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0 10px 0 25px;
}

.sidebar ul li, #menu ul li{
    padding: 10px 0 10px 0;
}

.sidebar ul li h2, #menu ul li h2{
    font-family: Georgia, Sans-serif;
    font-size:14px;
}

.sidebar ul ul li, #menu ul ul li{
    padding: 0;
    line-height: 20px;
    list-style-image: url(images/arrow.png);
}

/*-------------------------FOOTER-------------------------*/

#footer{
    clear: both;
    float: left;
    width: 739px;
    height: 42px;
    background: url('images/footer.png') no-repeat;
    text-align: center;
}

            /*-------------------------LINKS-------------------------*/

#blank_link1{
    float: left;
    height: 42px;
    width: 26px;
}

#emote_link{
    float: left;
    height: 42px;
    width: 87px;
}

#blank_link2{
    float: left;
    height: 42px;
    width: 421px;
}

#thehunter_link{
    float: left;
    height: 42px;
    width: 110px;
}

#avalanche_link{
    float: left;
    height: 42px;
    width: 71px;
}

#blank_link3{
    float: left;
    height: 42px;
    width: 25px;
}

            /*-------------------------LINKS END-------------------------*/

#footer p{
    line-height: 15px;
}

.post{
    padding: 10px 0 30px 20px;
}

.post_icon{
    background: url('images/post_icon.png') no-repeat;
    background-position: left;
    width: auto;
    height: 45px;
}
.title{
    padding: 6px 0 0 46px;
}

small{
    color: #777;
}

.post h2{
    font-family: Georgia, Sans-serif;
    font-size: 18px;
}

.entry{
    line-height: 18px;
}

p.postmetadata{
    background: url('images/post_div.png') no-repeat;
    background-position: bottom;
    text-align: center;
    margin: 10px 0 0 0;
}

.navigation{
    padding: 10px 0 10px 20px;
    font-size: 14px;
    font-weight: bold;
    line height: 18px;
}

.comments-template{
    margin: 10px 0 0;
    border-top: 1px solid #ccc;
    padding: 10px 0 0;
}

.comments-template ol{
    margin: 0;
    padding: 0 0 15px;
    list-style: none;
}

.comments-template ol li{
    margin: 10px 0 0;
    line-height: 18px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
    font-family: Georgia, Sans-serif;
    font-size: 16px;
}

.commentmetadata{
    font-size: 12px;
}

.comments-template p.nocomments{
    padding: 0;
}

.comments-template textarea{
    font-family: Arial, Helvetica, Georgia, Sans-serif;
    font-size: 12px;
}

2009-06-14 11:47:55

bugz: Fission Mailed; +3,311|6890

I don't know much anythign (compared to Zimmer and liq) about CSS but you have #menu float set to left. Change the position to center maybe?

Last edited by ebug9 (2009-06-14 11:54:49)

Steam: http://steamcommunity.com/id/ebug122

2009-06-14 11:49:49

menzo: ̏̏̏̏̏̏̏̏&#; +616|7024|Amsterdam‫

inb4 zimmer/liq they are css gods

https://i231.photobucket.com/albums/ee37/menzo2003/fredbf2.png

2009-06-14 11:55:13

tupla_s: .; +455|7170|Finland

ebug9 wrote:
I don't know much about CSS but you have #menu float set to left. Change the position to center maybe?

Nope, tried that, didn't work.

2009-06-14 12:53:01

ghettoperson: Member; +1,943|7227

This topic reminds me of how hilarious it is to join the #CSS channel on Gamesurge and start talking about n00bs and headshots.

2009-06-14 15:42:10

Zimmer: Un Moderador; +1,688|7334|Scotland

Well, first of all, why does your menu contain divs and all that shiz?

It should be like so:

Code:

<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="blah">Blog</a></li>
<li><a href="blah">Images</a></li>
<li><a href="blah">Videos</a></li>
<ul>

And then the css should be something like

Code:

#menu {
height:37px;
list-style: none;
margin:0 auto;
padding:0 0 0 10px;
width:900px;
}
#menu li {
display:inline;
}
#menu a {
color:#FFFFFF;
display:block;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
height:18px;
border-right: 1px solid;
line-height:18px;
padding:8px;
text-decoration:none;
}
#menu a:hover {
color:#E4B100;
}

Note, that I just cut this from one of my previous sites and it's not tailored to your exact menu. But you should know what to do from here.

Also, to align it in the center, as I am assuming you are using a fixed width site, then just do this:

margin-left: 300px;

For #menu

That should put it close to the center, and you can perfect however much you like. It's rough, but it does the trick and should work anywhere.

Hope that helps. Give me a shout if it doesn't. I haven't actively tested it nor do I have the time right now, but I am sure you can

Also, next time you ask for help with templating and CSS, make sure you give us the source code from the BROWSER, not from your text editor. I need to see how it is rendered online, I don't want to see the php stuff, it also saves time and is much easier to take a look at.

2009-06-14 16:07:58

liquidat0r: wtf.; +2,223|7205|UK

menzo2003 wrote:
inb4 zimmer/liq they are css gods

lol, where did you get that from? I barely know enough CSS to scrape through.

2009-06-14 16:28:30

jsnipy: ...; +3,277|7100|...

you know you are in trouble when name things like "firefox_fix" lol

2009-06-14 18:16:11

tupla_s: .; +455|7170|Finland

Zimmer wrote:
Well, first of all, why does your menu contain divs and all that shiz?

'Cos I'm a noob and the divs have background images that align to bottom when I hover over it.
Like this one:

I tried your way but the text is still aligned to left and without the images.

jsnipy wrote:
you know you are in trouble when name things like "firefox_fix" lol

Lol, yeah. I added a IE fix to make everything centered and it broke in firefox so i added a fix for firefox too

EDIT: Yay, fixed it. removed float:left from #header and it's working
EDIT2: No I didn't
EDIT: Now I did not sure if I did it correctly though, but it works. Changed width to total of the stuff inside.

Last edited by tupla_s (2009-06-14 19:44:14)

2009-06-14 21:18:29

konfusion: mostly afk; +480|7128|CH/BR - in UK

There's always "margin:0 auto" to center stuff. But you need a set width for that to work.

-kon

Pages: 1

Index »
Community »
Everything Else »
CSS (Cascading Style Sheets) help

Board footer

Jump to

BF2S Forums CSS (Cascading Style Sheets) help

Code:

Code:

Code:

ebug9 wrote:

Code:

Code:

menzo2003 wrote:

Zimmer wrote:

jsnipy wrote:

Board footer