...

View Full Version : New to CSS...



skill_guy101
02-28-2005, 12:43 AM
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.

http://opendreamdesigns.co.uk/plan.png

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

rmedek
02-28-2005, 12:57 AM
Hi Dan.

POSTING GUIDELINES (http://www.codingforums.com/postguide.htm)

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. :D I recommend W3 Schools (http://www.w3schools.com/css/css_intro.asp), 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.

harbingerOTV
02-28-2005, 02:41 AM
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.

skill_guy101
02-28-2005, 08:04 PM
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 (http://www.thornburytkd.com/news) 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

skill_guy101
02-28-2005, 08:17 PM
Is it because my CSS doesnt like png?

_Aerospace_Eng_
02-28-2005, 08:41 PM
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

#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

#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

skill_guy101
02-28-2005, 10:07 PM
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.

_Aerospace_Eng_
02-28-2005, 10:20 PM
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

skill_guy101
02-28-2005, 10:36 PM
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

_Aerospace_Eng_
02-28-2005, 11:54 PM
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

skill_guy101
03-01-2005, 12:10 AM
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
:o

Scootertaj
03-01-2005, 02:46 AM
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.

harbingerOTV
03-01-2005, 04:40 AM
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/presentation/listamatic/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?

skill_guy101
03-01-2005, 06:17 PM
please forgive my igorance.

i followed your link.

All i can think about doing is :


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

rmedek
03-01-2005, 11:56 PM
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):


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


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.

skill_guy101
03-03-2005, 01:45 AM
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):


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

Thanks that really did help alot.

just one question tho.




ul#nav li {
width: 14.285%;
float: left;
margin-top: -30px;
}
ul#nav li a {
text-indent: -9999px;
overflow: hidden;
margin: 0 auto;
display: block;
width: 104px;
height: 31px;
background: url(images/nav.png) no-repeat top left;
}


if i need the hieght to be 21px but all the images go over the top of eachother if i change the height to less than the 'margin-top.

how can i change this?

Thanks ever so much :D

rmedek
03-03-2005, 08:23 AM
Can you post a link to the page?

The margin-top bit is there only because it's my lazy way to position the links to where they need to be... If you change the height on the lists and the links there shouldn't be a problem; if we can view your page we might be able to see the problem in context...

skill_guy101
03-03-2005, 08:16 PM
Ok i just uploaded it.

http://www.opendreamdesigns.co.uk/onlinepreacher

the css is at: http://www.opendreamdesigns.co.uk/onlinepreacher/onlinepreacher.css

rmedek
03-03-2005, 09:19 PM
You can't set negative margins on the list items... because they're floated, if they have room to move they will. In other words, they pile up on each other because there's no longer another list item next to it (if it's moved by something like a negative margin).

Use the ul margins to adjust the position of the links-- it's the block-level element that's containing your list.


/* setting up the nav*/

ul#nav li {
width: 14.285%;
float: left;
}
ul#nav {
margin: -30px 0 40px 0;
}

ul#nav li a {
text-indent: -9999px;
overflow: hidden;
margin: 0 auto;
display: block;
width: 104px;
height: 21px;
background: url(images/nav.png) no-repeat top left;
}


There you go. Spend some time with those tutorials mentioned so you get a better understanding of why certain things work or don't.

Hope this helps,

skill_guy101
03-03-2005, 10:35 PM
Thanks alot for that. do you no how to get it to work in IE?

rmedek
03-03-2005, 10:38 PM
Yes...

skill_guy101
03-03-2005, 11:03 PM
lol, could you inlighten me?

rmedek
03-03-2005, 11:10 PM
Of course.


He who experiences the unity of life sees his own Self in all beings, and all beings in his own Self, and looks on everything with an impartial eye.




This is my way of telling you that you need to tell me what you are having problems with, descriptively and specifically. I'm here to help you, not code this for you :)

skill_guy101
03-03-2005, 11:24 PM
i see your point, it is a bit like me asking you to code this a bit at a time. But my main area of coding experties is actionscript (Macromedia Flash) and php (i no a bit of html). im finding it very hard to learn CSS as i cant seem to find many tutorals to show me how to do what i want to do. and to be honest i still dont no what the zeros means in "margin: -30px 0 40px 0;". i dont really like taking advantage of you by asking you all these questions that are sometimes quite general. i dont undertand why IE ie doesnt like the code. perhaps it doesnt suport certain comands. what comands doesnt it suport that we have used? or do we have to state a few more comands asking it to fix the position of all the links. and the borders gonna be a bit of a tricky issue to examin, perhaps it would be best for that if you explained how you would do it and then i could google each step and work out how to do it by my self. Sorry for being a bit of a leach

rmedek
03-04-2005, 02:31 PM
That's really not what I'm saying... I'm asking for you to be specific and descriptive when you ask your questions. It'll also help you answer what's going on.

What's not working in IE? Are the margins different? The padding? The color? Image not showing up?

When you figure out what's not working, post it here, or try Google (you'd be surprised how much is out there). Also, remember we posted a few great tutorials earlier:

http://htmldog.com
http://www.w3schools.com

Again, it's not so much the working through the problems as much as we just need a description of what the problem actually is. Do you take your car to the mechanic and go, "it doesn't work," without giving him at least a little info first? :)

skill_guy101
03-06-2005, 02:37 PM
ahh ok,

well...

in IE the banner isnt centered (persumably the hole site isnt either) there are no borders that put the text in a fixed position. The same problem with the menu buttons. The menu buttons are slightly to low and arnt transparent. also, there is some text at the top saying 'online preacher.org'.

thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum