Log in

View Full Version : 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


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


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


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



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




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.



<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.
boogyman
09-19-2007, 03:32 PM
check out mp3.com you will see what i'm talking about.
the standard test of a site's scaling ability is to size -3x / 3x the default.. and when that happens mp3.com site is broken.

another thing to note on text sizes is that you should only declare the text size once in your css file, then use associative percentages that will keep the same rations between all the elements and you won thave to worry about the minute differences between render's in different browsers... eg IE and Opera and Firefox and Safari could all display the same exact page 4 different ways depending on the font-size definition alone
salvo
09-19-2007, 04:35 PM
how can i test to see how it is broken ? I'm very intersted and a great point, i'm glad you made it.
boogyman
09-19-2007, 05:59 PM
on any site that you visit. hit Ctrl + that will increase the font-size 1
do that 3 times and you will see. the other option is
view > text size > increase/choose size
salvo
09-19-2007, 07:17 PM
this is the same option when holding down cntrl and scrolling mouse up and down right ?. When i do this at the mp3.com, it looks fixed and nothing moves at all, is this what you meant when you said it breaks ?
djr33
09-19-2007, 07:34 PM
Sometimes a page is set to specific sizes for the fonts so they won't change with that. Annoying. Hence why you should use relative sizes.
salvo
09-19-2007, 10:08 PM
but the question is, is this set in the external css ?


I think creating a site that doesn't resize, pictures, objects etc... is essential to maintain the continuity of the web designers overall design of the site, now if you could create the site and use the css to resize everything in proportion it would be a plus. Boogyman did make an excellent point in regardsto the visually challanged and making a site that is more accessible to a broader audience. I would much like to learn to create css to do both, this way you could provide a link to both such as one does with a flash and HTML version of a site.
djr33
09-19-2007, 10:23 PM
Using percents for a layout will make it work well like that.
You can use increments of "em" or "%" for numbers, rather than pixels.
Rockonmetal
09-19-2007, 10:26 PM
Though i highly recommend if you use percents, only use nice %100 for images or things that will pixelate when stretched!!!!!!!! t
boogyman
09-19-2007, 11:28 PM
creating 2 sites is umm.... a maintanence nightmare.
In the world of web-development and accessibility Flash should be treated in the same way as non-essential images. in other words, if the object was not present the website would still be usable, which also coincides with the point of creating an accessible site.
There are many factors that could prevent the flash object not available, however the most prevalent and very often the one that causes the hindrance is not having the appropriate plug-in (mini applet that allows the object viewable).

Brief History lesson on the web

3 Pillars
Pillar 1: Structure
This is the actual content of the page, should be created using HTML 4.01 DOCTYPE, using <div> and <p>
Pillar 2: Layout
This is where the page is transformed from its bland raw black and white (default) code into the WOW! crap that's cool cosmetic look. This should be created using CSS.
Pillar 3: Dynamic Action
This is all the extra stuff that will enhance the client (user's) experience. This is comprised of client-side scripting languages like javascript and flash that will create the added effects.

When done correctly this is how a good website is created, and it will be accessible to all regardless of any hindrance said user may / may not have.


now back on topic... if you would like to use some flash that is awesome, but in my experience, the best uses for flash on a website are in small trinkets as it does take up extra time to download and render the swf files which quite often are pretty large. It is said that you have on average approximately 5seconds that's
mississippii1mississippii2mississippii3mississippii4mississippii5
to grab their attention and if they are still waiting, they will get bored and move on. also if the person doesn't have the right plug in and you do your navigation in flash... said client will be stuck on your homepage forever and their experience will be extremely frustrating, and the chances of them coming back / ever recommending you to a friend(s) is significantly less.
salvo
09-19-2007, 11:38 PM
Well put boogyman, but i would never use flash for anything other than a player, just for the reasons you have stated. I'm looking at a css, ajax, asp.net and sql database for dynamic content. This is why i'm so interested in doing the site the right way using css for "WOW crap", lol. I slike to web site designs as simple and as clean as possible, you only need a little flare to really make the site pop!. But back to the lesson at hand. by the way I appreciate all the input it reinforces my thoughts on design as well, good to know others think the same way.

My question s to you boogyman is, what do you feel would be the best way to replicate the mp3.com banner withthe login. Is it better to use all css to create this ? or possibley layers as well ? floating layers ? What do you think would be the best approach ?
boogyman
09-20-2007, 12:12 AM
if you want to basically copy the way they did it look at the CSS of the way accomplished there's. They used the floating technique.

P.S. looking at someone's code that you would like to replicate is can be a very useful and educational tool. Just be sure to ask permission before using bits of their code, because while it may be viewable, it is deemed intellectual property when it is published, even as easily it is to be published on the web. Therefore you should use their contact form / address and ask permission. from what I have found most are flattered, that you asked and I have only encountered 1 person that has ever told me I could not borrow the concept of their design.
salvo
09-20-2007, 12:43 AM
Technically you can not own intellectual rights to open source code such as css, if that is what they used. They could not technically patent or own rights to the way a website is layed out. I have seen plenty of sites that use the same banner layout, and quite frankly it is simple and clean. Besides, I'm not looking to copy exactly what they have on their site. I'm looking to create the same effect in terms of creating a login on top of the banner/header and locking that into a postion. If i wanted to i guess i could you something like HTTracker and stip the sitedown and just rewrite everything using their css code, but i'm not a hacker. I much rather learn how to do it from others and reading tutorials, books etc... I found the best way is to hit hte forums and work with people that have done it or have the know how to do it. That is why I'm here talking with people like you that have the knoweldge and are willing to share it with new css coders like me :). Which again I'm very greatful for, i've learned much since our conversation. although I still have lots to go.
djr33
09-20-2007, 01:02 AM
No... That's like saying you can't copyright pencil lead. It sorta sidesteps the issue: Your creation can be copyrighted. The tools used can't.
CSS isn't owned by you, but what you write with it is.

Your assembly of the code, just like your assembly of words in a story, is your own.

That is relatively finite.

It becomes messy when you start to consider indefinite objects, like the layout. The layout itself is also copyrighted, but not in all its elements. Only the specific use could be, and, legally, if provable as the original idea of such a design and different enough to stand out. Just having a banner or, likely, a similar banner would be fine.

If you were to exactly copy a certain site to the point where it was clearly part of why your site was successful, you can bet you'd be sued. But just gathering ideas is how the web works.
boogyman
09-20-2007, 01:18 AM
if you do not think this is applicable in real life... look at

http://www.simplebits.com/notebook/2007/04/02/simplepool.html

he had a design company attempt to rip his new logo and sell it on their site then sue him for intellectual property rights... luckily he had blogged about it months before the company claimed it created their "logo"
djr33
09-20-2007, 01:23 AM
Perfect example, because that's absolutely true, and most people don't really think it applies, so frequently things are stolen, but it ends up catching up to people in the end... sometimes. Considering the fast pace of the web, it frequently does slip under the radar, but it ends up catching up to you once it gets big enough.
salvo
09-20-2007, 01:31 AM
That is what i'm basically saying, i'm not talking about writting the code exactly as they did as i've stated before. I'm just trying to learn how to create the same style, I was using the site becuase it is similar to the idea i have in wanting to create a banner using a username and password login at the top right of the banner.

I actually have an image with a logo on it to use as the banner/header, I would like to learn how to position a login and username field ontop of the banner so I can postion on the banner and lock it down so it won't move when resizing the text.

Boogyman had given me some simple code at the beginning of the thread which I was playing around with. I can't seem to lock down the banner or the searchfield.

I will actually put the search id bellow the banner on what I would like to call navbar backgorund, it will go at the right end of my navibar, but that will be my next tackle.
salvo
09-20-2007, 01:40 AM
you guys are going way to deep into this, you are compairing apples to oranges. I'm not hear to create friction and i'm here to learn. But you are talking about a logo, i'm not looking copy anyones logo, I design great graphics myself and don't need to rip anyones stuff. If you want to comapre what I'm trying to to do: you could say I'm tyring to hang a picture the same way you have it in your house, I can hang a picture the same exact way you can becuase there is no way you have it copyrighted. you just can't copyright it, just can't be done. Its common knowledge or open source if you would. Same here with what i'm trying to learn creating this same banner with login info effect, its common knowledge/open source I just have not learned how to do it yet. Now as far as the copyright being like copywriting a pencil, its a bad analogy, becuase you can't copyright the led of a pencil, but you could own intellectual rights on how you processed the led to get it into the pencil of course aslong as that is not common knowledge/open source either.
salvo
09-20-2007, 01:50 AM
If you like I can give you my url of the layout design I created in photoshop/fireworks. I first like to design out my site then cut it up into images then create the site template. Here you can see why i'm trying to create this effect. I want to do the site in as much css as possible.
boogyman
09-20-2007, 02:10 AM
i was using that as an example of how easily and often things are stolen from the web... i was not suggesting that you take an image or logo.

what I was trying to show its intellectual property. Daniel, doesnt and didnt have a patent / copyright on the actual logo, but the logo itself is still considered intellectual property.

and your analogy of hanging things on a wall, well thats the same concept. 2 interior decorators are partners, 1 is the creative manager and 1 is the operations manager, the creative manager writes in his sketch book that one day the operations manager takes and starts his own company? copywritten? no, but intellectual property definitely. same principle as The Waterboy.

This applies alot more when it comes to the resale of items, and it is still hard to prove in either case, but if you are copying someone's design CONCEPT then that can be considered intellectual property, and permission should be obtained.

a very big majority of the people have no problem, and really all they require is just that you post a comment referencing their page, which isnt even viewable unless someone looks at the sourcecode... which is what all web-licenses adhere to


but we are getting off subject... good luck with your layout, and if you need any help with something let us know
djr33
09-20-2007, 03:38 AM
Yeah, not trying to be overly obsessed with it. But it is a good thing to keep in mind.

There's always the balance of, yes, it IS copyrighted, with what is actually reasonable to use. (technically the use of everything down to a single word is copyrighted, but the line must be drawn somewhere.)

And, yes, good luck.
salvo
09-20-2007, 03:20 PM
When planning to make an all css website, do you suggest using layers and or tables to hold the html code for the css ? or should i just stick to using the css for positioning the, banner/header, text, images etc?

I have seen some decent css type layouts that i can manipulate for what i need, just wanted some opinions on it.