CSS Teething Issues

Fuyu · May 8th, 2007, 10:55 AM

Hey all,

So I'm years behind everyone else and have finally decided to learn CSS instead of cutting and pasting stuff...

It's the small things that get you...

I have a test page here: (with the css file here) where I'm trying to align a menu list on the right with logo text on the left (both on the same line)...

There is a break of some kind which keeps the two lines on well, their own lines

I have been messing with margins, clears, floats, positions etc and I know it's a small thing... I suspect that the many tutorials I look at have slightly different syntax styles so my use of classes and id's is probably corrupt.

Anyone see what the error is?

Thanks!

**markscns** · May 8th, 2007, 11:08 AM

Under your .logo section, why do you have the following:

padding-top:1em;
padding-left:1em;

But under topmenu, you don't? Just from a quick glance, if you remove that from toplogo, it might be in the same line as the menu?

Fuyu · May 8th, 2007, 11:30 AM

I was trying to get the logo text which is on the left hand side of the line to be spaced 1em away from the edge of the black box on the left and top.

Similarly, the topmenu which appears (ideally) on the same line but on the right hand side is

padding-top:1em;
padding-right:1em;

Fuyu · May 8th, 2007, 12:22 PM

Ok, forget the all on one line issue! My eyes were tired and it just looked like they were off! The old paper edge held to monitor check worked out just fine!

Any takers on the borders and overflow issues? I can try to keep the content framed in the borders but there's no accounting for desktop resolutions or size of text settings on the users' browser... so if it is going to overflow, fine, but I'd like for the dimensions of the main container to remain constant...

Cheers!

wgm · May 8th, 2007, 12:40 PM

Border

Replace:

Code:

border-top-style: solid 1px #CCCCCC;
border-bottom-style: solid 2px #999999;
border-right-style: solid 2px #999999;
border-left-style: solid 1px #CCCCCC;

With:

Code:

border-top: solid 1px #CCCCCC;
border-bottom: solid 2px #999999;
border-right: solid 2px #999999;
border-left: solid 1px #CCCCCC;

wgm · May 8th, 2007, 12:46 PM

Not sure if will make a difference or not, you have a percent with auto.
.logo {
width:auto%;
}

Fuyu · May 8th, 2007, 6:39 PM

Getting closer!

The height seems to be the issue now. The width can be controlled by percentages, can the height be controlled in the same way? Is it one or the other? I'd like the two submenu areas to fall one under the other, each taking up half of the available space given the user's settings.

I've used divs to define the space and tried controlling height:50%; etc. Using the colored backgrounds, I can see that the two submenu divs do not stack up against each other as I had expected them to (there's a gap). Clearing padding and using margins set to zero haven't appeared to fix the alignment issue.

Thanks for taking a look at this stuff!

**Dan** · May 8th, 2007, 7:32 PM

Quote:

Originally Posted by Fuyu

GThe width can be controlled by percentages, can the height be controlled in the same way? Is it one or the other?

Just wanted to answer this real quick while I had a sec. Height can be controlled by percentages also.

I'll take a look at the rest of it more in a bit and see if there's anything I can offer help with

(I could never get into CSS and DIV pages.. I still use tables in tables in other tables)

**Dan** · May 8th, 2007, 7:57 PM

change:

#middle #submenus {
clear:both;
float:right;
width:auto;
height:430px; /* Can't this be dyanmic? A percentage? */
}

to

#middle #submenus {
clear:both;
float:right;
width:auto;
height:100%;
}

May 8th, 2007, 10:55 AM	#1 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	CSS Teething Issues Hey all, So I'm years behind everyone else and have finally decided to learn CSS instead of cutting and pasting stuff... It's the small things that get you... I have a test page here: (with the css file here) where I'm trying to align a menu list on the right with logo text on the left (both on the same line)... There is a break of some kind which keeps the two lines on well, their own lines I have been messing with margins, clears, floats, positions etc and I know it's a small thing... I suspect that the many tutorials I look at have slightly different syntax styles so my use of classes and id's is probably corrupt. Anyone see what the error is? Thanks! __________________ Server: Pass3 (72.29.75.151)

May 8th, 2007, 11:08 AM	#2 (permalink)
markscns 01101100 Super #1 Joined in Jan 2006 Lives in West Michigan Hosted on SH92 1,604 posts Gave thanks: 49 Thanked 113 times	Under your .logo section, why do you have the following: padding-top:1em; padding-left:1em; But under topmenu, you don't? Just from a quick glance, if you remove that from toplogo, it might be in the same line as the menu? __________________ twinlakeweather.us SH92

May 8th, 2007, 11:30 AM	#3 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	I was trying to get the logo text which is on the left hand side of the line to be spaced 1em away from the edge of the black box on the left and top. Similarly, the topmenu which appears (ideally) on the same line but on the right hand side is padding-top:1em; padding-right:1em; __________________ Server: Pass3 (72.29.75.151)

May 8th, 2007, 12:22 PM	#4 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	Ok, forget the all on one line issue! My eyes were tired and it just looked like they were off! The old paper edge held to monitor check worked out just fine! Any takers on the borders and overflow issues? I can try to keep the content framed in the borders but there's no accounting for desktop resolutions or size of text settings on the users' browser... so if it is going to overflow, fine, but I'd like for the dimensions of the main container to remain constant... Cheers! __________________ Server: Pass3 (72.29.75.151)

May 8th, 2007, 6:39 PM	#7 (permalink)
Fuyu Registered User Seasoned Poster Joined in Jan 2004 Lives in Atlanta, GA, USA Hosted on PASS3 66 posts Gave thanks: 7 Thanked 0 times	Getting closer! The height seems to be the issue now. The width can be controlled by percentages, can the height be controlled in the same way? Is it one or the other? I'd like the two submenu areas to fall one under the other, each taking up half of the available space given the user's settings. I've used divs to define the space and tried controlling height:50%; etc. Using the colored backgrounds, I can see that the two submenu divs do not stack up against each other as I had expected them to (there's a gap). Clearing padding and using margins set to zero haven't appeared to fix the alignment issue. Thanks for taking a look at this stuff! __________________ Server: Pass3 (72.29.75.151)

May 8th, 2007, 12:46 PM	#6 (permalink)
wgm Registered User Super #1 Joined in Mar 2005 Lives in Washougal, WA 1,306 posts Gave thanks: 23 Thanked 39 times	Not sure if will make a difference or not, you have a percent with auto. .logo { width:auto%; }

May 8th, 2007, 7:57 PM	#9 (permalink)
Dan Staff of Surpass Super #1 Joined in Apr 2007 2,687 posts Gave thanks: 145 Thanked 178 times	change: #middle #submenus { clear:both; float:right; width:auto; height:430px; /* Can't this be dyanmic? A percentage? */ } to #middle #submenus { clear:both; float:right; width:auto; height:100%; }

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search