PDA

View Full Version : Alignment issue



marc1om
Oct 14th, 2009, 05:28 PM
Hey everyone,

I'm very new to HTML and CSS. I have created a small website and am using dreamweaver to create/edit it.

I have almost got everything I need except there is a slight issue with the alignment of the top toolbar.

The Top toolbar is not aligned with the body.
You can see it at http://calendars101.net/

Any help would be greatly appreciated! it's driving me crazy and i'm positive it isn't something that is difficult to resolve.

Thanks!!

drhowarddrfine
Oct 14th, 2009, 05:33 PM
Your #search input is set too far right. Reduce the 906px value.

marc1om
Oct 14th, 2009, 11:35 PM
i've altered the search box in every way i can think of but its not moving the top toolbar location, its only adjusting the search box.

sylphestre
Oct 15th, 2009, 03:38 AM
<div id="search">
<form method="get" action="">
<fieldset>
<input onkeydown="if(event.keyCode==13) searchSubmit();" onfocus="clearSearch(this);" id="search" name="search" type="text" value="Enter search here..." />
</fieldset>
</form>
</div>

I believe if you change
<div id="search">

to...
<div id="search" style="position: absolute; top: #px; left: #px;">

you should be able to move the search box to wherever you want it to be. I'm new to this to, so you will probably need to gather more input on that.

marc1om
Oct 15th, 2009, 07:15 AM
Thanks for your input! But, i'm not trying to move the search bar. I am trying to move the top blue toolbar. If you look closely you can see that this toolbar is not aligned with the grey body outline. The top blue toolbar is a bit to the right thus not being perfectly centered with the page.

Thanks again!

Marcio

Avril
Oct 15th, 2009, 10:32 AM
It would help if you posted your .css ...

SB65
Oct 15th, 2009, 12:01 PM
It would help if you posted your .css ...

Avril, we can see the css from the link that's provided - either directly via the source, or using Firebug/IE dev toolbar etc.


If you look closely you can see that this toolbar is not aligned with the grey body outline. The top blue toolbar is a bit to the right thus not being perfectly centered with the page.

First off, you seem to be referencing the same css twice:



<link media="screen" type="text/css" rel="stylesheet" href="WebFX Media/frozenage/frozenage/style.css">
<link type="text/css" rel="stylesheet" href="style.css">

I haven't looked all the way through, but they look the same to me. Certainly #page appears identically in both. You need to delete one of these to avoid confusion. In fact the blue toolbar is centered on the page, but the grey body isn't, because of the padding applied to #page. If you make #page:


#page {
background:transparent url(images/img05.gif) no-repeat scroll 0 0;
margin:0 auto;
padding:45px 0;
width:960px;
}

then the grey box lines up with the toolbar at the top.

SB65
Oct 15th, 2009, 12:21 PM
.. and while I'm looking, although the search box looks fine at 1280px wide, at 1024 it's off the right of the screen, which is what everyone else is posting about.

Because you are using absolute positioning, it's always going to be 906px from the left no matter how wide the screen is, so the trick is to position the right, not the left. But first you need to set position:relative on an enclosing element, which then sets the "start point" for absolute positioning.

You want the search box to be within #menu, so set position:relative here:


#menu {
background:#252E3A url(images/img02.jpg) no-repeat scroll 0 0;
height:62px;
margin:0 auto;
position:relative;
width:960px;
}

then make your css for the search box:


#search input {
position:absolute;
right:25px;
}

You don't need the top value now because we've set the start point to be #menu (rather than the whole page as it was before). Now the search box will always be 25px from the right of #menu, however wide #menu is.

marc1om
Oct 15th, 2009, 03:31 PM
Hey guys,

You all seem to know what your talking about which is great but now you have me a little confused ha ha ha....

If I change my style.css, these changes will be produced?

Here is the coding. Can someone point out exactly what changes would need to be made in order to get the results?

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
margin: 0;
padding: 0;
}

body {
background: #FFFFFF url(images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6E6E6E;
}

input, textarea {
background: #FFFFFF url(images/img09.gif) repeat-x;
border: 1px solid #FFFFFF;
border-top-color: #A3A3A3;
border-left-color: #D6D6D6;
font: normal 1em/normal "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #6E6E6E;
}

h1, h2, h3 {
margin-bottom: 1.5em;
letter-spacing: -0.05em;
font-family: Georgia, "Times New Roman", Times, serif;
}

h1, h1 a, h2, h2 a {
text-decoration: none;
color: #414141;
}

h1 a:hover, h2 a:hover {
text-decoration: underline;
}

h1 {
font-size: 38px;
}

h2 {
font-size: 28px;
}

h3 {
font-size: 16px;
font-weight: normal;
color: #939292;
}

p, ul, ol {
margin-top: 1.5em;
line-height: normal;
}

ul, ol {
margin-left: 3em;
}

blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
color: #346086;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.left {
float: left;
margin-right: 20px;
}

img.right {
float: right;
margin-right: 20px;
}

hr {
display: none;
}

/* Logo */

#logo {
width: 960px;
height: 135px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#logo h1, #logo h2 {
margin: 0;
}

#logo h1 {
float: left;
padding-top: 75px;
}

#logo h2 {
float: right;
padding-top: 95px;
font-size: 16px;
font-weight: normal;
}

#logo h2, #logo h2 a {
color: #939292;
}

#logo a {
text-decoration: none;
}

/* Menu */

#menu {
width: 960px;
height: 62px;
background: #252E3A url(images/img02.jpg) no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#menu ul {
margin: 0;
padding: 21px 0 0 30px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
padding: 0 20px 0 22px;
background: url(images/img03.gif) no-repeat left center;
}

#menu li.first {
background: none;
}

#menu a {
text-decoration: none;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}

/* Search */

#search {
float: none;
width: 180px;
clear: none;
}

#search fieldset {
border: none;
}

#search input {
float: none;
position: absolute;
top: 156px;
left: 906px;
}

#search #s {
width: 136px;
margin-right: 7px;
padding: 2px 5px;
}

#search #x {
background: none;
border: none;
}

/* Banner */

#banner {
width: 960px;
margin: 0 auto;
padding: 8px 0;
}

/* Page */

#page {
width: 960px;
background: url(images/img05.gif) no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 45px;
padding-right: 35px;
padding-bottom: 45px;
padding-left: 25px;
}

/* Content */

#content {
float: left;
width: 603px;
}

.post {
}

.post .title {
margin: 0;
padding: 0 20px;
}

.post .entry {
padding: 0 20px;
}

.post .meta {
height: 47px;
margin: 20px 0 40px 0;
padding: 15px 0 0 20px;
background: url(images/img07.gif) no-repeat;
line-height: normal;
}

/* Sidebar */

#sidebar {
float: right;
width: 253px;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#sidebar li {
margin-bottom: 40px;
padding: 0 15px 0 20px;
}

#sidebar li ul {
}

#sidebar li li {
margin: 0;
padding: 5px 0;
border-bottom: 1px solid #E5E5E5;
}

#sidebar li h2 {
margin-bottom: 15px;
font-size: 18px;
}

/* Calendar */

#sidebar #calendar {
padding: 0;
background: url(images/img08.jpg) no-repeat;
}

#calendar caption {
margin: -20px auto 0 auto;
text-align: center;
font-weight: bold;
}

#calendar table {
margin: 0 auto;
caption-side: bottom;
}

#calendar thead th {
width: 31px;
height: 40px;
font-weight: bold;
color: #FFFFFF;
}

#calendar tbody td {
width: 31px;
height: 31px;
text-align: center;
color: #9E9E9E;
}

#calendar tfoot td {
padding-top: 20px;
font-weight: bold;
}

#calendar #next {
text-align: right;
}

/* Footer */

#footer {
clear: both;
width: 870px;
height: 50px;
margin: 0 auto;
padding: 35px 45px;
background: url(images/img05.gif) no-repeat;
}

#footer p {
margin: 0;
line-height: normal;
color: #B4B4B4;
}

#footer a {
color: #B4B4B4;
}

#footer .legal {
float: left;
}

#footer .credit {
float: right;
}
#page #content .post .entry .left {
font-weight: bold;
}




Thanks!!!!

SB65
Oct 15th, 2009, 03:38 PM
Make sure you are only calling one css file from your header.

Then replace the bits in the remaining css file with the bits I included in my post. So, where I've highlighted a change to #menu, find #menu in your css and make your css like my posting.

marc1om
Oct 15th, 2009, 04:30 PM
Make sure you are only calling one css file from your header.

Then replace the bits in the remaining css file with the bits I included in my post. So, where I've highlighted a change to #menu, find #menu in your css and make your css like my posting.


I'm not sure what calling one css file for the header means. :confused:

SB65
Oct 15th, 2009, 04:42 PM
OK, well if you look in your page at the moment, on line 19 you have


<link href="WebFX Media/frozenage/frozenage/style.css" rel="stylesheet" type="text/css" media="screen" />


and then again on line 34 you have:


<link href="style.css" rel="stylesheet" type="text/css" />


These two files are, as far as I can see, identical. Delete one of them, and keep just one link to one of the files which you will then update.

Repeat this for all your pages, because they all seem to have the same issue.

marc1om
Oct 19th, 2009, 05:36 PM
Hello,

I see the two files for the header and I have deleted it from the css. This is from every single pages css.

Im still confused however with

You want the search box to be within #menu, so set position:relative here:

Code:

#menu {
background:#252E3A url(images/img02.jpg) no-repeat scroll 0 0;
height:62px;
margin:0 auto;
position:relative;
width:960px;
}

then make your css for the search box:

Code:

#search input {
position:absolute;
right:25px;
}

You don't need the top value now because we've set the start point to be #menu (rather than the whole page as it was before). Now the search box will always be 25px from the right of #menu, however wide #menu is.



Is this code in the Style.css or each individual's page css? What line am I looking for, and what exactly am I changing. From what to what?


Thanks!

SB65
Oct 19th, 2009, 07:03 PM
I see the two files for the header and I have deleted it from the css. This is from every single pages css.

Good.


Is this code in the Style.css or each individual's page css?

It's style.css.


What line am I looking for, and what exactly am I changing. From what to what?


Change this


#menu {
width: 960px;
height: 62px;
background: #252E3A url(images/img02.jpg) no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

to this


#menu {
background:#252E3A url(images/img02.jpg) no-repeat scroll 0 0;
height:62px;
margin:0 auto;
position:relative;
width:960px;
}

and this


#search {
float: none;
width: 180px;
clear: none;
}

to this


#search input {
position:absolute;
right:25px;
}

and this


#page {
width: 960px;
background: url(images/img05.gif) no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 45px;
padding-right: 35px;
padding-bottom: 45px;
padding-left: 25px;
}

to this


#page {
background:transparent url(images/img05.gif) no-repeat scroll 0 0;
margin:0 auto;
padding:45px 0;
width:960px;
}

It's really all in the earlier posts if you read them properly.

marc1om
Oct 19th, 2009, 08:26 PM
Thanks alot for the detailed outline!

But, it didn't yield the desired results yet.
http://calendars101.net/Wall-Calendars.html

Menu bar is still too far right :(

SB65
Oct 20th, 2009, 09:08 AM
But, it didn't yield the desired results yet.

It might do, if you made any of the changes. None have been made on the link you provide. And you now have


#search input {
float:left;
}

marc1om
Oct 20th, 2009, 05:18 PM
Thank you so much! You were a great help with your detailed instructions! :)

#search {
float: none;
width: 180px;
clear: none;
}

This confused me because it wasn't working properly. Thats not what needed to be replaced, it was the #search input.

You've been great deal a help, sure i'll be needing you again :)