Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    abg
    abg is offline
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    few questions about scc layout (lists and columns)

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    This might give you a starting point: http://www.456bereastreet.com/archiv...tate_with_css/

  • #3
    abg
    abg is offline
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Umm..uh..I cant really get my head around that thing.
    So this is the css

    Code:
    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

    Code:
    <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.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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.:
    Code:
    <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:
    Code:
    #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?

  • #5
    abg
    abg is offline
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    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/...ints_copy.html
    No text decoration efects?

    Here the css

    Code:
    #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

    Code:
    <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

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,915
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Oh sorry, just noticed I made a mistake in my last post. Of course if you write:
    Code:
    #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:
    Code:
    #textileprint .textile a,
    #clothing .clothing a,
    #design .design a
    etc.
    Also what you wrote:
    Code:
    #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).

  • #7
    abg
    abg is offline
    New to the CF scene
    Join Date
    Mar 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    #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

    Code:
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •