New To CSS

**salvo** · 09-18-2007, 08:41 PM

I'm pretty new to CSS, I think it is realy dynamic, no pun intended, and i want to build a site utilizing all css. I was qonseinf id someone could help me with an example of an external css sheet and html for a banner with login on the right hand side of the banner. I would be able to study it and try to duplicate it with a search feature, etc..... Thank you in advance.

**boogyman** · 09-18-2007, 09:48 PM

file.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title>PAGE TITLE</title>
     <link type="text/css" rel="stylesheet" href="/path/to/css/file.css" media="all">
</head>

<body>
<div id="header">
       <img src="/path/to/header/image.gif" alt="logo description">
       <form id="searchId">
           <input type="text" name="search" value="">
           <input type="submit" name="submit" value="Search">
       </form>
</div>

</body>
</html>

file.css

Code:

div#header {
    background: #000 url('/path/to/background/pic.gif');
}
div#header form#searchId {
     position: absolute;
    top: 10em;
    right: 5em;   
}

I would suggest that you do not use absolute positioning for every element that you create, however for something like this I do not see a problem

**salvo** · 09-19-2007, 03:27 AM

Thank you for the reply, now i noticed that you have both the header image setup both in the style sheet as well as the html. Which one would i use ? and will that cause a conflict ? I also noticed that when I change the size of the text ? (using mouse scroll and cntrl key) the search field moves up and down on the site, how do i make it so it would be fixed ?

I tried changing from absolute to fixed but then the top and right positioning syntex in the stayle shee did not work.
One last thing, I did also noticed that you created a style **** with the div# instead of .div, is this just a preference ? or does it make a difference ? Thank you again.

**boogyman** · 09-19-2007, 01:07 PM

Originally Posted by salvo

Thank you for the reply, now i noticed that you have both the header image setup both in the style sheet as well as the html. Which one would i use ? and will that cause a conflict ?

I created 2 images on purpose, because sometimes you would like to have a header background. the image inside the header is intended to be your logo img, and no they will not conflict.

Originally Posted by salvo

I also noticed that when I change the size of the text ? (using mouse scroll and cntrl key) the search field moves up and down on the site, how do i make it so it would be fixed ?

oops, I forgot about this bug. I haven't used this style in a long time, and I believe you figured out why I stopped. ammend your file to be something like this

Code:

div#header {
    float: left;
    background: #000 url('/path/to/background/pic.gif');
}
div#header form#searchId {
     float: right;
}

Originally Posted by salvo

One last thing, I did also noticed that you created a style **** with the div# instead of .div, is this just a preference ? or does it make a difference ? Thank you again.

I am not exactly sure what you are asking here, but I am going to take a stab.
the pound(#) element in a CSS file is used to style an instance of an id. the dot(.) element in a CSS file is used to style an instance of a class. The difference between them is how many times one occurs. An ID can only occur once per page, where as a CLASS was designed to have multiple instances within each page. Now you can also not use either of those, and it is generally suggested that you do create a general div style to apply. In this instance I chose to include the ID's because I wanted to give a unique identifier to each of the object. when I create a page, I usually create 4 instances of unique characteristics.

HTML Code:

<body>
     <div id="container">
          <div id="header">head text</div>
          <div id="mainContent">body stuff</div>
          <div id="footer">footer text</div>
      </div>
</body>

This is just my preference but I create the container id and usually restrict the size to 90-95% of the body to allow some "whitespace". the other 3 are pretty much self explanatory, but again this is just my preference.

if that didnt touch on your question please forgive me; if you rephrase your question I will try again to help you.

**salvo** · 09-19-2007, 02:58 PM

no, you hit the nail right on the head, I apologize for not asking more clearly. But your explanation was excellent. Now as far as the palcement of the search field, why does it move when I resize text ? how do we make it fixed in the locations that use the top and right em settings.

**boogyman** · 09-19-2007, 03:06 PM

it moves because it is re-rendering the page. you would need to use some javascript to disable the resizing of text, however that would limit the accessibility.

now if it is shifting to locate on a "new" line rather than floating like it should be doing, that is a different story. that could be a case of some other css styles affecting or some other little but... if you post a url I will be able to help you out

**salvo** · 09-19-2007, 03:15 PM

see for me the most anoying thing is when i resize everything on the site moves, I don't want that, if the site is designed the right way you can avoid that and everyone can see the site properly, they may just need to scroll up and down left and right, etc.... I'm glad you can help. i have seen some sites that create this effect with no problem.

**boogyman** · 09-19-2007, 03:19 PM

what about people with bad vision? or someone that is blind?
a good website is accessible to all, regardless.

and if the site is designed correctly it will be fine regardless of screen size / or any imparments the client(user) may have.

scrolling up and down is part of web publishing... but breaking convention and having a horizontal scroll bar is taboo and shouldn't be used unless there is a good reason... note.. just because isn't a reason...

and I am also assuming that you are using tables? to design the layout also? tables were designed for tabular / record type data, not site schema.
HTML was not designed for layout, it was designed for structure and the content that is what CSS is for.

**salvo** · 09-19-2007, 03:20 PM

I want to create a simlar feature as the login and banner for this site. I'm doing something totaly different but i like the way it looks and want to replicate it. NOtice if you try to resize nothing moves at all, limited accessablitly but the site is done in a good font sizer so you can afford to lock it so visitors can't resize. I thought this was done with the style sheet by specifying the size of banner, text, searchid and login fields etc...

check out mp3.com you will see what i'm talking about.

**salvo** · 09-19-2007, 03:20 PM

Hmmmm i see what you mean.

Thread: New To CSS

Thread Tools

Search Thread

New To CSS

Bookmarks

Bookmarks

Posting Permissions