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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26

Thread: New to CSS...

  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New to CSS...

    Hello, im both new here and new to CSS.

    i am currently creating a website and as i am used to using macromedia flash but would to it in css instead. here is what i intend the website to look like.



    I would like as much infomation to be in the CSS file. i would like the banner (which will be a png) to be inserted using CSS how would i do that?

    I would have all the navigational items (home, news, index, etc) as another png that will go over the top as i plan to alternate the banner on every visit. how do you put images on top of eachother and add links to them in css?

    also, is it posible to have a border that is like i have (the bit where all the news is?). it is 1 black pixel followed by 9 white pixels followed by 1 other black one..

    how do tell it to put all the html into the box i have?

    o and one last thing, how do i set it to be centerd and a certain whith.

    If anyone of you have any resources can help me achieve my goals then id love to here from you. also if you can help me with my specific needs it would ge awesome aswell.

    Thanks alot

    Dan

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Hi Dan.

    POSTING GUIDELINES

    Second, either you need a good tutorial, or you are expecting one of us to rearrange a few hours of their life to code your websitte for you. I recommend W3 Schools, as you already know (I'm assuming) some HTML and just need a good primer on CSS.

    Once you have a handle on that we can guide you a little more, hopefully one thing at a time.

    The FAQs at the top of this forum also have a few answers to your questions.

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Along with that, site I would suggest looking at other sites CSS files and looking at how it displays on the page. I learned a good bit from tutorials, but seeing the working example helped a lot more for me. I'd guess you have HTML knowledge already so having a few windows open, seeing the page and then seeing where it is is the HTML and the corosponding CSS that controls it shouldn't be too hard.

    As far as few of your questions:

    to center with a fixed width - look at any site that resembles what you want and you'll probally find something like:

    body {
    text-align: center;
    }
    #wrapper or #container {
    text-align: left;
    margin: auto;
    width: whatever;
    }

    The border question. There are several ways to do it. It's a little more advanced than the centering a page one. No you can't use one command to make a border like that. You could make one div with a white background and black border. Then place another div inside it with a grey background and a black border.

    Some of your other questions are pretty basic (ie. you need to know how to do it on every single site you do) and a good primer will show you what you need to know.

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply.
    i do the W3Schools tutorial thing.

    and for the advice about going through other peoples css. Can someone please tell me how this chap got his banner and nav to display.

    if you look at his main.css i see that he uses somthing similar to:

    #header {
    position : relative;
    width : 715px;
    height : 201px;
    background-image : url(/images/banner1.png);
    background-repeat : no-repeat;
    background-position : 0% 0%;
    border : medium none inherit;
    border-bottom : 2px solid #ccc;
    text-align : left;
    margin : 0;
    voice-family : "\"}\"";
    voice-family : inherit;
    height : 152px;
    }

    to put the image on the page, but when i do it it doesnt work. can someone please tell me why. thanks

  • #5
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it because my CSS doesnt like png?

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    IE has a hard time trying to display a png background only because it doesn't support alpha transparency as a normal image without having to do something else to it, lets try to break down your header css
    Code:
    #header {
    position : relative; /*not really needed, you can take it out if you want*/
    width : 715px;
    height : 201px;
    background-image : url(/images/banner1.png);/*that beginning forward slash may be causing your problem*/
    background-repeat : no-repeat;
    background-position : 0% 0%; /*I dont know what you are trying to do here, as long as your header image is the exact size as you tell this element to be you wont have to position it*/
    border : medium none inherit;/*then why even have this if no border is to be displayed*/
    border-bottom : 2px solid #ccc;
    text-align : left;
    margin : 0; /*can make this margin: 0 auto; to get your header centered*/
    voice-family : "\"}\""; /*IE 5.5 hack i believe*/
    voice-family : inherit; /*IE 5.5 hack also*/
    height : 152px; /*assuming this height goes along side with the hack, its not really neccessary*/
    }
    so all in all your header css could look something like this
    Code:
    #header {
    width : 715px;
    height : 201px;
    background-image : url(images/banner1.png);
    background-repeat : no-repeat;
    border-bottom : 2px solid #ccc;
    text-align : left;
    margin : 0 auto;
    }
    try that

  • #7
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for the help *deletes the gifs he made to aviod the problem*. does firefox have the same problem with pngs?

    im having a hard time putting other images over the top of that one (for the navigation. what would be the best method of doing this?

    To save you lovely people time a link to sometutorial that goes a bit more indepth about how to practically inpliment css with examples so i can achieve what i want to do would be great also.

    Once again, Many thanks.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    no FF does not have the problem with pngs, but the but rather than placing images over something, make them background images, and if you are just going to have like a menu that is like 5 links or something vertical then u can use a list and use css to style it and what not

  • #9
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    no FF does not have the problem with pngs, but the but rather than placing images over something, make them background images, and if you are just going to have like a menu that is like 5 links or something vertical then u can use a list and use css to style it and what not
    They will be horisontal. The reason that they have to be over the top is that i will have a differnt banner every day/visit and i dont want to change the menu images aswell. does this mean that i cant have them as background images in a differnt div inside this div or something?

    thanks again

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    just make them backgrounds so u have less to change, im assuming you would use some type of script to change your banner and the backgrounds of the nav menu, i would still use a list u would just have to add display:inline; to the li element in your css because by default a list displays as a block element

  • #11
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok im still really confused about going about doing this. is there a tutorial that will help me do this?

    the only one that i can find that is similar is :
    http://www.w3schools.com/css/css_list.asp
    i litrally dont no how to go about making a list thing.

    apologies for my ignorance

  • #12
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to put the image on the page, but when i do it it doesnt work. can someone please tell me why. thanks
    Just wondering but do you have an image saved as "banner1.png" (without the quotes). Without an image of "banner1.png" then you'd be telling it to display something you don't have.

  • #13
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    On his ite you have to look further into the CSS to find his menu.

    /* Nav Linkage */

    this section has the list he used to create the menu. Since it's contained in the #header and the image is set as a background. The list will naturally sit on top of it.


    On your menu, since you want to change it all the time but keep the same apperance, try something like this.

    Make a horizontal list (http://www.maxdesign.com.au/presenta...atic/index.htm) .
    Have the images of your words have transparent backgrounds (GIFs). Use padding accordingly to make them space out correctly. Or make the images themselves wide enough where padding isn't neccessary (easier IMO).

    Then margin the whole list so that it sits where you want it to in the #header.

    When you make a new background, use the one you have right now as a template so that no matter what everything lines up correctly.

    Make any sense?

  • #14
    New Coder
    Join Date
    Feb 2005
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    please forgive my igorance.

    i followed your link.

    All i can think about doing is :

    Code:
    #navcontainer ul li
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    float: left;
    background: url("images/home.png") repeat-x 20px;
    text-align: center;
    }
    
    #navcontainer a
    {
    color: #000;
    text-decoration: none;
    display: block;
    width: 70px;
    }
    #navcontainer a:hover { background: url("images/homehover.png") repeat-x 20px; }
    for each button but changing the padding each time. you would also have a div for each one. i dont really get what u mean sorry. please can you explain how to do it your way. thankyou so much

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Ok, I typed up a little example to help you with your links at the top.

    What you have is a header graphic, with this frame thing over it that outlines the links. The graphic is going to change, so we want that separate from the rest if possible. The "frame" could be replicated using only CSS border properties, except that its white with a black outline, so we can draw that and use that separately. Finally, we have the links, positioned at the bottom.

    Here's the HTML to mark that up (using my example, not your specific site):
    Code:
    <body>
    	<h1>My Example Site</h1>
    		<ul id="nav">
    			<li><a id="home" href="#">home</a></li>
    			<li><a id="away" href="#">away</a></li>
    			<li><a id="contact" href="#">contact</a></li>
    		</ul>
    	<h2>The rest of the site</h2>
    		<p>...</p>
    </body>
    Stylewise, the approach I took was to make the header, hide the text, and apply a background image. That image can be whatever you want it to be.

    Next, I created a "frame" graphic and used that for the background of the ul. I positioned the ul and the lis within by adjusting the margins. You could use any method you prefer.

    Then, since I'm only using three links for this example, I gave each li a width of 33% and floated them left.

    Give the links within "display: block", position them accordingly, and apply a background image. I used one background image for all of the links and adjusted the position. This is because I'm using a png... IE's gonna need a hack or two unless you use a gif, so this way I have less images to load and hack-ify.

    Here's the relevant CSS from my example below:
    Code:
    		ul, li	{
    			list-style-type: none;
    			}
    		
    		ul#nav	{
    			margin: -200px 0 20px 0;
    			width: 650px;
    			height: 200px;
    			background: url(images/frame.gif) no-repeat top left;
    			}
    		
    		ul#nav li	{
    			width: 33%;
    			float: left;
    			margin-top: 167px;
    			}
    		
    		ul#nav li a	{
    			text-indent: -9999px;
    			overflow: hidden;
    			margin: 0 auto;
    			display: block;
    			width: 65px;
    			height: 25px;
    			background: url(images/links.png) no-repeat top left;
    			}
    		
    		ul#nav li a#away	{
    			background-position:  0 -41px;
    			}
    			
    		ul#nav li a#contact	{
    			background-position:  0 -80px;
    			}
    Here's the finished example (tested only in Mozilla... IE's going to need a png hack and a margin nudge):

    http://richardmedek.com/temp/example9.htm

    Tear it apart, have fun... hopefully it works for you or helps you get an idea or two.
    Last edited by rmedek; 03-03-2005 at 08:30 AM. Reason: Added CSS for clarification


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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