SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Newbie: Having logo on left and search box onright not working!!!

    since it's on my dev server I can't link to it (since it sleeps at night me want silence).

    Anyways here's the code
    Code:
    #left {
    	margin-left:2px;
    	margin-bottom:4px;
    	display:block;
    }
    #right {
    	float:right;
    	background: white;
    	display: block;
    	width: 200px;
    	float: right;
    	margin-top: 0px;
    	padding:0;
    }
    and the containers for the logo and search box
    Code:
    <div id="left">
    	<img src="/images/logo.gif"/>
    </div>
    <div id="right">
    	<!-- sitesearch google -->
    	<form method="get" action="http://www.google.com/search">
    			<input type="hidden" name="ie" value="utf-8"/>
    			<input type="hidden" name="oe" value="utf-8"/>
    			<input type="text" name="q" size="15" maxlength="255" value=""/>
    			<input type="submit" name="btng" value="search Site"/>
    			<input type="hidden" name="sitesearch" value="macwrite.com" checked="checked"/>
    	</form>
    	<!-- sitesearch google -->
    </div>
    I am going crazy trying to get them to line up adove the navigation bar
    Code:
    .navigation
    {
    	background-repeat: repeat-x;
    	text-shadow: 1px 1px 4px #000;
    	font-size: 12px;
    	font-weight: normal;
    	width: 100%;
    	height: 15px;
    	background-image: url("../images/navigation-background.gif");
    }
    .navigation li {
    	padding-bottom:0px;
    	padding-top:1px;
    	padding-right:10px;
    	list-style-type:none;
    
    	float:left;
    }
    .navigation a {
    	padding:0px;
    	text-decoration:none;
    	color:white;
    	display:block;
    	text-align:center;
    }
    Code:
    <ul align="center" class="navigation">
    	<li><a href="/editorials.php">Columns</a></li>
    	<li><a href="/yourturn/">Submit Article</a></li>
    	<li><a href="mailto:advertising@macwrite.com">Advetising</a></li>
    	<li><a href="newsletter@macwrite.com">Newsletter</a></li>
    	<li><a href="/">Home</a></li>
    </ul>
    This is my first attempt at CSS design. I am going crazy.
    Get busy living or get busy dying
    --Stephen King

  2. #2
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    css...

    Code:
    #header{
            width: 100%;
    	margin: 0;
    	padding: 0;
    	text-align: right;
    }
    
    #header img{
            float: left;
    }
    sourcecode...

    Code:
    <div id="header">
    	<img src="/images/logo.gif"/>
    	<!-- sitesearch google -->
    	<form method="get" action="http://www.google.com/search">
    			<input blah blah blah/>
    			<input blah blah blah/>
                             etc
    	</form>
    	<!-- sitesearch google -->
    </div>
    Something like that should get you started
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  3. #3
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    as for the nav bar...

    put that in it's own div too

    css

    Code:
    #headerNav{
    	width: 100%;
    	clear: both;
    	margin: 0;
    	padding: 0;
    	border-bottom: 1px solid #999;
    	text-align: right;
    }
    
    #headerNav ul{
    	margin: 0;
    	padding: 2px;
    }
    
    #headerNav li{
    	margin: 0;
    	padding: 0 5px 0 10px;
    	border-left: 1px solid #999;
    	list-style: none;
    	display: inline;
    }
    sourcecode...

    Code:
    <div id="headerNav">
        <ul>
          <li>LINK</li>
          <li>LINK</li>
          <li>LINK</li>
          <li>LINK</li>
        </ul>
    </div>
    Not 100% sure if all this will work, but I think it will get you going in the right direction. I'm sure someone will let you know if I've been filling your head with rubbish.
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Vancouver Canada
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The navigation code made it worse (couldn't find it) so I didn't use it. but the header code worked, but the form is too high. Thanks for the help. Now how to get the form level with the logo.
    Get busy living or get busy dying
    --Stephen King

  5. #5
    High fives all round! bradley317's Avatar
    Join Date
    Jan 2004
    Location
    Chester, UK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use padding and margin attributes of the form element
    Hello, hello, what's all this shouting?
    We'll have no trouble here

    (Helping a pal... http://www.funkdub.info)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •