Home/ Questions/Q 8228261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T16:24:22+00:00

Ok so I have my web page ( http://jsfiddle.net/HVGBf/ ) but it’s not working

  • 0

Ok so I have my web page (http://jsfiddle.net/HVGBf/) but it’s not working the way I would like it to be working.

As you see on a small browser the Logos text is jumping down because of the line-height.
I’d like the Project Name to be abreast if possible, else i’d like it to be among each other but how can I accomplish that?

Html: 

<body class="home">    
    <div id="wrapper">

        <div id="logo">
            <span>Project name</span>
        </div><!-- endLogo -->

        <div id="menu">
            <ul>
                <li><a href="">Home</a></li> 
                <li><a href="">Over ons</a></li> 
                <li><a href="">Projecten</a></li> 
                <li><a href="">Vrienden</a></li> 
                <li><a href="">Doneren</a></li> 
                <li><a href="">Contact</a></li> 
            </ul>
        </div><!-- endMenu -->

    </div>
</body>
</html>​

Css:

 /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html, body { font-family: "helvetica", arial; margin: 0; padding: 0; height:100%;}

#wrapper {
    min-width: 800px;
}

.home #logo { 
    background: #00B65F; 
    width: 22%;
    float: left;
    padding: 0 1% 0 2%; 
    text-align: right;
    -webkit-border-top-right-radius: 15px; 
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px; 

    line-height: 180px;
    height: 180px;
    font-size: 220%;
}
.home #logo span {
    font-color: #000;
}
.home #menu {
    background-color: #000; 
    float: right; 
    background-repeat: repeat; 
    padding: 56px 5% 56px 1%; 
    -webkit-border-top-left-radius: 15px ;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px; 
    margin-left: 6%;
    width: 63%;
    height: 70px;
}


#menu ul { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 100%;

}
#menu li { 
    float: left; 
    list-style-type: none;  
}
#menu a { 
    float: left;
    text-decoration: none; 

    font-size: 150%;
    color: #fff; 
    padding: 0.4em 0.7em 0.4em 0.7em;
    -webkit-border-radius: 10px; 
    border-radius: 10px;
    display: block;
}

#menu a:hover, #menu .active { background-color: #00B65F; }
​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you just want the words “Project” and “Name” to be on one line, then this should do the trick:

    #logo span { white-space: nowrap; }

    The text might extend outside of #logo due to how you’ve sized it (by percentage), so to fix that you could also add a minimum width like so:

    #logo { min-width: 200px; }

    Edit: I noticed you also have margin-left set to 6%. I would recommend using a constant value like 20px. Also, here is a jsFiddle with the recommendations I’ve mentioned.

    • 0