14 Replies - 1654 Views - Last Post: 14 September 2007 - 04:39 PM

#1 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Alright CSS experts, I'm having alignment problems.

Post icon  Posted 13 September 2007 - 07:02 PM

Alright, I haven't posted a coding question in.... Years? But this time I'm pretty stumped.

I'm trying to get the navigation to align right on my new layout, I have tried everything I can possibly think of, I'm probably missing something really simple that I didn't catch...

This is how the navigation currently looks -

Posted Image

and this is how I'd like it to look -

Posted Image

Here is my code for the header -

<div id="header">
  <div id="logo">
<img src="http://marklangenfeld.com/images/header.jpg" border="0" />
  </div>
   <div>
	<ul class="navigation">
	  <?php

if (is_home()) {$pg_li .="current_page_item";}
?>
	  <li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Blog"><span>Blog</span></a></li>
	  <?php wp_list_page('depth=1&title_li=&exclude=143' ); ?>
	</ul>
  </div>
</div>
<div id="wrap">


'Wrap' being getting into the main content which is fine, and the header image is also placed fine, it's isolated to -

<ul class="navigation">


or the div in which it's in. Simply aligning the div doesn't do anything but move the nav to the middle and it moves it if the window is resized, I would like it to be static over to the right...

Here is my CSS -

Header and logo which appear to be fine -

#header {
background-image:url(images/top.gif);
background-position:top;
background-repeat:repeat-x;
height:145px;
margin:0;
padding:0;
}

#logo {
height:100px;
width:770px;
margin:0 auto;
}


and Navigation

.navigation a:link,.navigation a:visited {
background:#FFF url(images/active1.gif) left bottom no-repeat;
color:#787878;
height:24px;
margin-right:2px;
padding-left:12px;
text-decoration:none;
}


Again this code is making the page display how it is in the first example image.


Any help would be much appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Alright CSS experts, I'm having alignment problems.

#2 asadarnell  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 30-August 07

Re: Alright CSS experts, I'm having alignment problems.

Posted 13 September 2007 - 07:23 PM

View PostMarkoDaGeek, on 13 Sep, 2007 - 07:02 PM, said:

Alright, I haven't posted a coding question in.... Years? But this time I'm pretty stumped.

I'm trying to get the navigation to align right on my new layout, I have tried everything I can possibly think of, I'm probably missing something really simple that I didn't catch...

This is how the navigation currently looks -

Posted Image

and this is how I'd like it to look -

Posted Image

Here is my code for the header -

<div id="header">
  <div id="logo">
<img src="http://marklangenfeld.com/images/header.jpg" border="0" />
  </div>
   <div>
	<ul class="navigation">
	  <?php

if (is_home()) {$pg_li .="current_page_item";}
?>
	  <li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Blog"><span>Blog</span></a></li>
	  <?php wp_list_page('depth=1&title_li=&exclude=143' ); ?>
	</ul>
  </div>
</div>
<div id="wrap">


'Wrap' being getting into the main content which is fine, and the header image is also placed fine, it's isolated to -

<ul class="navigation">


or the div in which it's in. Simply aligning the div doesn't do anything but move the nav to the middle and it moves it if the window is resized, I would like it to be static over to the right...

Here is my CSS -

Header and logo which appear to be fine -

#header {
background-image:url(images/top.gif);
background-position:top;
background-repeat:repeat-x;
height:145px;
margin:0;
padding:0;
}

#logo {
height:100px;
width:770px;
margin:0 auto;
}


and Navigation

.navigation a:link,.navigation a:visited {
background:#FFF url(images/active1.gif) left bottom no-repeat;
color:#787878;
height:24px;
margin-right:2px;
padding-left:12px;
text-decoration:none;
}


Again this code is making the page display how it is in the first example image.


Any help would be much appreciated.


Maybe try float: right;

I'm not an expert, but that's the only thin I could com up with.:S
Was This Post Helpful? 0
  • +
  • -

#3 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Re: Alright CSS experts, I'm having alignment problems.

Posted 13 September 2007 - 07:44 PM

Yeah I did float:right on both the div and the <ul class="navigation">, it puts it in like the middle of the page and it moves as the window is resized.
Was This Post Helpful? 0
  • +
  • -

#4 axel  Icon User is offline

  • Bug Juice Doesn't Come in a Jar
  • member icon

Reputation: 2
  • View blog
  • Posts: 1,944
  • Joined: 31-December 06

Re: Alright CSS experts, I'm having alignment problems.

Posted 13 September 2007 - 08:28 PM

Darn I was going to say that and sound almost smart. But I guess not. I could ask my dad for you if you want.

Jackie Chan is to martial arts as Dad is to CSS
Was This Post Helpful? 0
  • +
  • -

#5 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Re: Alright CSS experts, I'm having alignment problems.

Posted 13 September 2007 - 08:54 PM

Yeah, like I said I've been doing light CSS stuff for years and this has got me stumped, it just refuses to align correctly...
Was This Post Helpful? 0
  • +
  • -

#6 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Alright CSS experts, I'm having alignment problems.

Posted 13 September 2007 - 09:43 PM

I don't know much about CSS, but would a position: absolute; and right:Npx; be in order?
Was This Post Helpful? 0
  • +
  • -

#7 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 07:12 AM

I hadn't tried that yet, I just put it in and it didn't budge.
Was This Post Helpful? 0
  • +
  • -

#8 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 07:23 AM

oops, I just noticed that I gave the wrong code for the navigation that I have -

.navigation {
clear:both;
height:24px;
width:729px;
margin:0 auto;
}

Was This Post Helpful? 0
  • +
  • -

#9 Fygar  Icon User is offline

  • I liek milk!!1
  • member icon

Reputation: 6
  • View blog
  • Posts: 4,361
  • Joined: 28-March 02

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 08:22 AM

Alright, I think it's something to do with your css relating to <a> tags under your navigation class.

Here's some stuff I did:

add/change this css:

span.current_page_item
	{
		background:#FFF url('/images/current1.gif') left bottom no-repeat;
		color:#AAC8E0;
		height:27px;
		line-height:24px;
		margin-right:2px;
		padding-left:15px;
		text-decoration:none;
	}
	.navigation {
		clear:both;
		height:24px;
		width:729px;
		margin:0 auto;
	}



And here's what I replaced in your menu:

<div id="header">
  <div id="logo">
<img src="http://marklangenfeld.com/images/header.jpg" border="0" />
  </div>
   <div class="navigation" style="text-align: right;">
	<span class="current_page_item"><!--normally a link here. But it pushes stuff to the left for me, so I left it out to show it will float to the right.--><span>Blog</span></span>
	<span class="current_page_item"><!--normally a link here. But it pushes stuff to the left for me, so I left it out to show it will float to the right.--><span>About</span></span>
	<span class="current_page_item"><!--normally a link here. But it pushes stuff to the left for me, so I left it out to show it will float to the right.--><span>Archives</span></span>
	<span class="current_page_item"><!--normally a link here. But it pushes stuff to the left for me, so I left it out to show it will float to the right.--><span>Subscribe</span></span>
  </div>
</div>



Alltogether, you are doing some css stuff that I don't normally do / is over my head. :)
Was This Post Helpful? 0
  • +
  • -

#10 MarkoDaGeek  Icon User is offline

  • Dirty Technophile
  • member icon

Reputation: 11
  • View blog
  • Posts: 11,158
  • Joined: 13-October 01

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 08:40 AM

Alright well, it's getting over my head too... Thanks for looking into it, I think I'll just keep it where it's at.
Was This Post Helpful? 0
  • +
  • -

#11 no2pencil  Icon User is online

  • Admiral Fancy Pants
  • member icon

Reputation: 5382
  • View blog
  • Posts: 27,350
  • Joined: 10-May 07

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 08:47 AM

Format reinstall...
Was This Post Helpful? 0
  • +
  • -

#12 orcasquall  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 12
  • View blog
  • Posts: 158
  • Joined: 14-September 07

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 09:18 AM

I gave it a shot, and I got it working on Firefox and IE7. It reads easier with the entire HTML code.

<html>
<head>
<title>Test</title>
<style>
body {width:780px;margin:auto;text-align:center}

#header {
background-image:url(images/top.gif);
background-position:top;
background-repeat:repeat-x;
height:145px;
margin:0;
padding:0;

width:775px;
}

#logo {
height:100px;
width:770px;
margin:0 auto;

background-color:#cdfdad;
}

#navbar {
background-color:#dfdfdf;float:right;
}

#navbar ul {list-style:none;text-align:left;clear:left;}
#navbar li {float:left}
#navbar a {padding:0 5px}
</style>
</head>
<body>
<div id="header">
  <div id="logo">
  </div>
   <div id="navbar">
	<ul>
	  <li><a href="">asdf</a></li>
	  <li><a href="">qwer</a></li>
	  <li><a href="">cbn</a></li>
	  <li><a href="">wty</a></li>
	</ul>
  </div>
</div>
<div id="wrap"></div>
</body>
</html>



Basically, I added a width attribute in your #header, the body tag part, and the #navbar parts. I don't have your full HTML code, so you might have to do some code comparison to see which parts you can use (or is appropriate).

Hope this helps!
Was This Post Helpful? 0
  • +
  • -

#13 asadarnell  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 108
  • Joined: 30-August 07

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 02:38 PM

View PostMarkoDaGeek, on 14 Sep, 2007 - 07:23 AM, said:

oops, I just noticed that I gave the wrong code for the navigation that I have -

.navigation {
clear:both;
height:24px;
width:729px;
margin:0 auto;
}

margin:0 auto;

aligns it to the center.
Was This Post Helpful? 0
  • +
  • -

#14 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 04:13 PM

text-align: right works with objects as well as text. However, since you have text inside your objects you will need to encase the text inside a div or span and create a separate ID for it setting the text-align: center for the text with that ID. This way the CSS will keep it centered inside the div/span.

Otherwise, the text will also be aligned to the right side of each container.
Was This Post Helpful? 0
  • +
  • -

#15 William_Wilson  Icon User is offline

  • lost in compilation
  • member icon

Reputation: 205
  • View blog
  • Posts: 4,807
  • Joined: 23-December 05

Re: Alright CSS experts, I'm having alignment problems.

Posted 14 September 2007 - 04:39 PM

adding: align: right; to your .headerright class seems to work, with a local copy of your page, did you change the code at all since this started, i notice they are text links instead of tabs now.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1