CODEWITHSUNDEEP
htmlcssdrupalwebdrupal-7
stdcerr
stdcerr

Reputation: 15628

getting image on same line

I'm developing a website using drupal's (7.14) Marinelli theme as a template. I'm currently fighting with getting the main menu onto the same line as the logo. The url of my page is http://quaaoutlodge.com/drupal-7.14/ - can anybody help me on how I have to set the css properties or put the html together to get this aligned properly? The icon should be on the left side of the main menu and the yallow background is just for debugging reason. Any help would be appreciated! Thank you! The code in page.tpl.php currently looks like this:

  <div style="background:#000; height:85px; position:fixed; top:0px; width:100%; text-align: right;padding-right:-20px; filter:alpha(opacity=60);border-bottom:1px solid #999;">
<div style="text-align: left;
            top:0px;
            width:70%;
            padding-left:100px;
            padding-right:auto;
            margin-left:auto;
            margin-right:auto;
            background-color:#FFFF00;"><?php if($logo):print $imagelogo;endif ?>
<div id="navigation-primary" class="sitemenu">
  <?php print $mainmenu; ?>    
</div></div>

Upvotes: 1

Views: 128

Answers (4)

reubidium
reubidium

Reputation: 41

Don't be afraid of using negative margins to position things around each other.

See also: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Upvotes: 0

alexvance
alexvance

Reputation: 1134

The main problem is that the second div (the one that wraps the logo & navigation) is too small to fit the logo and navigation comfortably.

First, please give that second div an id ("header-wrapper", for instance) and take out the style attribute. Then here's the relevant CSS:

#header-wrapper { width: 1038px; margin: 0 auto; }
#logo { top: 15px; position: relative; }
#navigation-primary { float: left; margin-left: 50px; padding-top: 34px; }

Upvotes: 0

Amyth
Amyth

Reputation: 32959

Here, this is what you'd need to do : http://jsfiddle.net/Z4EAb/

Upvotes: 0

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

The easiest solution would be to set position:absolute on both divs together with a top: and margin-left: property to always fix them relatively. You could also float them both left for instance, set a width property and a margin-left on the right div.

Upvotes: 2

Related Questions