...

View Full Version : few questions about scc layout (lists and columns)



abg
03-06-2007, 12:16 PM
I'm doing portfolio site for my friend and learning css in the way.
I've uploaded a preveviev version of the pege to http://www.saunalahti.fi/atmu/pohja/index.html
I did the menu based on this tutor http://www.alistapart.com/articles/taminglists/#

Thougn I have a problelem with it. I have no idea how I can get the link to have ability to indicate where the user is browsing. When you mouse over it, the color and style changes and a small 1 pixel line apears. So if I could have that staying there when the link is active?
I found a tutor that touches the subject http://www.projectseven.com/tutorials/css/uberlinks/ Here its done with java script. Any way of doing that with plain css? Or is the java script way easyer?

Reduce browser window size and the right column is over lapping the center column. I have defined a min width to the center column but it didn't really help. I would love to have the browser starting to scroll when the middle column reaches a given value, say like 500 pixels.
The scroll you see now is caused by banners widht 1025 pixels.

If you have a solution or could recomend me any tutor concerning these issues I would be very pleased
thanks

VIPStephan
03-06-2007, 12:24 PM
This might give you a starting point: http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/

abg
03-06-2007, 03:11 PM
Umm..uh..I cant really get my head around that thing.
So this is the css


ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}

#button li a {
display: block;
width: 150px;
padding: 10px 10px 10px 0.5em;
background-color: #fff;
text-decoration: none;
font-weight: bold ;
width: 150px;
}

html>body #button li a {
width: auto;
}

#button a:hover {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
}


and html


<div id="button">
<ul>
<li><a href="textile_prints.html">TEXTILE PRINTS</a></li>
<li><a href="clothing.html">CLOTHING</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="about_me.html">ABOUT ME</a></li>
<li><a href="archive.html">ARCHIVE</a></li>
</ul>
</div>


Now css is defined for all of the things inside button div.
To put it simple: I would need to do ten of thoes sets (five with hover five with out) and replace #button with appropriate name, like #textileprints and so on? Any suggestions what the code may look like then?

Sorry about this confusing post, I'm such a beginner in css.

VIPStephan
03-06-2007, 03:23 PM
Number one: You can remove the div and put the ID to the ul. It won't make any difference and you got rid of one useless element.

Number two: Assign a class to each list item (li), e.g.:


<ul id=button">
<li class="textile"><a href="textile_prints.html">TEXTILE PRINTS</a></li>
<li class="clothing"><a href="clothing.html">CLOTHING</a></li>
<li class="design"><a href="design.html">DESIGN</a></li>



Number three: Assign unique IDs to the body element of each page, e.g.:

textile_prints.html gets <body id="textileprints">
clothing.html gets <body id="clothing">
design.html gets <body id="design">
etc.


Now to have the current page display the current link you'd add the style for the specific page to your CSS:


#button a:hover,
#textileprints #button a,
#clothing #button a,
#design #button a {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
}


Clear now?

abg
03-06-2007, 10:37 PM
I'm almost there! But not quit yet :)


Number one: You can remove the div and put the ID to the ul. It won't make any difference and you got rid of one useless element

I did that and your right it works just the same.


Number two: Assign a class to each list item (li), e.g.:

Done.


Number three: Assign unique IDs to the body element of each page, e.g.:

This was the thing that was fooling me. I just din't get it at first.


Now to have the current page display the current link you'd add the style for the specific page to your CSS:


I thinks this is the problem spot for me.

Look it now, TEXTILE PRINT has funktional link.
http://www.saunalahti.fi/atmu/pohja/index.html

All of the links are current link :confused:
I feel stupid I'm missing something small but crucial :)

And if I remove the link from the TEXTILE DESIGN it looks like this: http://www.saunalahti.fi/atmu/pohja/textile_prints_copy.html
No text decoration efects?

Here the css


#button li a {
display: block;
width: 150px;
padding: 10px 10px 10px 0.5em;
background-color: #fff;
color: #888888;
text-decoration: none;
font-weight: bold ;
width: 150px;
}

html>body #button li a {
width: auto;
}

#button a:hover {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
}

#button a:hover,
#textileprints #button a,
#clothing #button a,
#design #button a,
#aboutme #button a,
#archive #button a {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
font-weight:bold;
}


and html


<div id="leftcontent">
<ul id="button">
<li class="textileprints"><a href="textile_prints.html">TEXTILE PRINTS</a></li>
<li class="clothing"><a href="clothing.html">CLOTHING<a></li>
<li class="design"><a href="design.html">DESIGN</a></li>
<li class="aboutme"><a href="about_me.html">ABOUT ME</a></li>
<li class="archive"><a href="archive.html">ARCHIVE</a></li>
</ul>
</div>


Thank you so much for the help so far :thumbsup:

VIPStephan
03-06-2007, 11:56 PM
Oh sorry, just noticed I made a mistake in my last post. Of course if you write:


#textileprints #button a,
#clothing #button a,
#design #button a,


this is too general as it will address all links in the entire ul (#button a) and not the specific list item's link. So it must rather read:


#textileprint .textile a,
#clothing .clothing a,
#design .design a
etc.


Also what you wrote:


#button a:hover {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
}

#button a:hover,
#textileprints #button a,
#clothing #button a,
#design #button a,
#aboutme #button a,
#archive #button a {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
font-weight:bold;
}

essentially does the same so you can remove the first rule and just apply more styles if there is more to apply.

And one las thing: unless you will have more content than the list in your div called leftcontent you can remove the div element. The ul is a block-level element as well and you can style it just as the surrounding div (i.e. float it or whatever you wanna do).

abg
03-07-2007, 01:19 AM
Bloody hell I did it! This is most advanced coding I've ever done :)
http://www.saunalahti.fi/atmu/pohja/index.html

I removed this hover rule

#button a:hover {
border-right: 1px solid #888888;
background-color: #fff;
color: #cccccc;
font-style:italic;
}


And removed the leftcontent div and removed it's content under ul


ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
position: absolute;
left:10px;
text-align:right;
border:0px solid #000;
width:150px;
background:#fff;
padding:10px;
}

And hey any ideas for the other problem?

Reduce browser window size and the right column is over lapping the center column. I have defined a min width to the center column but it didn't really help. I would love to have the browser starting to scroll when the middle column reaches a given value, say like 500 pixels.
The scroll you see now is caused by banners widht 1025 pixels.

Or is it pointles to do liquid centercontent if I'm goin to display photos in it? And i want photos to stay same sized.

edit:typo



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum