Question about CSS... [Archive] - Graphic Design Forum

Click to See Complete Forum and Search --> : Question about CSS...

SkyDesigns7

07-17-2008, 09:01 PM

So in the middle of building my site i ran into an issue i can't seem to get around, everything is going as smooth as can be expected.

#header{ width:766px;
height:348px;
background-image:url(images/intro.jpg);
background-repeat:no-repeat;
background-position:0 57px;
text-align:left; }

is what i have in the source code, i need to change:

background-image:url(images/intro.jpg);

is there a way to get separate images to load on the 4 pages with the css? Right now all the pages are linking the same one. Wasn't sure if it was possible to have multiple backgrounds in the css code. i spose linking an image would work, i am new to web design but been reading a lot of the info here.

Two-Toe Tom

07-17-2008, 09:11 PM

for each page, you can add a different class to your element, then define the background image for each class. I think that should work, hope it makes sense!

07-17-2008, 09:51 PM

The way around this problem is to add the class or id to the body element of the html rather than the image.

/about.html

<body class="about">
</body>

/portfolio.html

<body class="portfolio">
</body>

CSS

body.about {
}

body.portfolio {
}

The reason I prefer classes over ids is that I build relationships between page elements easier. For example, if the about page has a special navigation element that you can create that relationship semantically by re-using the page class.

<ul class="about menu"
</ul>

However, since there is only one body tag you won't need to worry abut collisions as long as you target the correct element in the css:

ul.about.menu {
}

A bit more then what you asked for but just some pointers and conventions I find useful.

Less is always more. If you were to actually add class tags to each image than you would be creating more code with little benefit because the interface is the same.

07-17-2008, 10:35 PM

For this purpose say the web app consist of four separate pages. Those pages are /a.html,/b.html,/c.html and /d.html.

Each one of those pages has a common interface. The most obvious is the html tree structure outlined below.

Html

<html>
<head>
</head>
<body>
</body>
</html>

Every page will consist of this structure. You may have already known that. Therefore, you can make an assumption the body tag will be available on the every page of the web app.

Therefore, you should use this element to differentiate pages of the app because it will always be there. You can safely acknowledge the body element will always exist.

Once you understand this you can place a attribute on the body element that allows you the ability to target it with css. The body element essentially becomes the differentiating factor for separate pages.

/a.html

<html>
<head></head>
<body class="a"></body>
</html>

/b.html

<html>
<head></head>
<body class="b"></body>
</html>

/c.html

<html>
<head></head>
<body class="c"></body>
</html>

/d.html

<html>
<head></head>
<body class="d"></body>
</html>

Once you have added a class attribute to every body element with a name relating to the page you can target each individual body element of the application with a simple select statement.

/pages.css

body.a { ... }

body.b { ... }

body.c { ... }

body.d { ... }

Now you are able to target any element specific to the page it is on by preceding the selector with the after-mentioned selectors.

Now getting to your direct problem you can add a container to each page.

/a.html

<html>
<head></head>
<body class="a">
<div class="photograph"></div>
</body>
</html>

/b.html

<html>
<head></head>
<body class="b">
<div class="photograph"></div>
</body>
</html>

/c.html

<html>
<head></head>
<body class="c">
<div class="photograph"></div>
</body>
</html>

/d.html

<html>
<head></head>
<body class="d">
<div class="photograph"></div>
</body>
</html>

By using a class on the image you can avoid style conflicts. However, because the element needs to be changed on multiple pages the elements class should be more generic than the body class.

Once you have all that in place its simply a matter of creating the styles.

/presentation.css

body.a .photograph { ... }
body.b .photograph { ... }
body.c .photograph { ... }
body.d .photograph { ... }

Its probably best to add another class to the element because one day the photograph class may need to be reused. By using another class you can make the rule more specific and avoid future selector conflicts.

/a.html

<html>
<head></head>
<body class="a">
<div class="photograph dynamic"></div>
</body>
</html>

/b.html

<html>
<head></head>
<body class="b">
<div class="photograph dynamic"></div>
</body>
</html>

/c.html

<html>
<head></head>
<body class="c">
<div class="photograph dynamic"></div>
</body>
</html>

/d.html

<html>
<head></head>
<body class="d">
<div class="photograph dynamic"></div>
</body>
</html>

modified css:

/presentation.css

body.a .photograph.dynamic { ... }
body.b .photograph.dynamic { ... }
body.c .photograph.dynamic { ... }
body.d .photograph.dynamic { ... }

Its always best in web development and design to plan for future. Things you think you may not need at the moment you may need down the road.

Therefore, not only does this method make it easy to select the image but also makes it easy to select any future elements that may be similar in some respects between pages but need to be altered between contrasting pages.

/presentation.css

body.a h2 { color:red; }
body.b h2 { color:blue; }

SkyDesigns7

07-21-2008, 02:56 PM

Thank you!!

Been pouring over the wealth of info you bestowed on my thread. This clears the roadblock i was at. The rest is coming together nicely.

If i could only send ya something to show my appreiciation... ah yes!

cheers!

http://i33.photobucket.com/albums/d56/KOEvo/jager_bomb_thumb.jpg

natenation

07-21-2008, 05:23 PM

That is awesome Tz, very helpful.

SkyDesigns7

07-22-2008, 09:53 PM

So I've been going over the info you posted, read it about 12 times now and I believe i understand... i think.

The design of my site had the image linked inside the #header tag in the CSS, so what i need to do is.

1. on the index.html: nothing, i want to use that for the main screen.
2. profile.html & contact.html pages

HTML from profile.html page

<body>
<div id="header">
<ul class="menu">
</ul>
</div>
</body>

Header from CSS

#header{
width:766px;
height:348px;
background-image:url(images/intro.jpg);
background-repeat:no-repeat;
background-position:0 57px;
text-align:left;
}

So lets say i have 3 different pictures that are the above size:

width 766px
height 348px

So if i link correctly in their respective html files and as long as the image is the correct size it should look something like this:

<html>
<head></head>
<body class="profile.html/">
<div id="image/profile.jpg">
<ul class="menu">
</ul>
</div>
</body>

I think i am a little off but really close, i was kind of familiar with tables in dreamweaver but i haven't done any real web design in over a year so i wanted to relearn it but using css.

for example: old website, was more of a project in college;

http://198.86.244.3/rvoppenlander/web111/skyweb.html

New one with CSS: :D

http://www.Dane-Designs.com/

only the front page is loaded, was testing ftp and such, all the text and graphics are different now and still loading all my work into a flash gallery...

but it may help visualize the issue i am having.

thanks again for all of your advice

07-22-2008, 10:53 PM

Class and id names can't contain periods. I'm no sure about forward slashes but generally I wouldn't advise including those either. For further info you can read my comments in the css section. For future notice though / refers to the root of the site. Its not actually part of the file name. Its the hassle free way of pointing to a file if you know the absolute path relative to the top of the site. Rather than using just contact.html which expects the file to be in the current working directory. However, if you know that file in the site root its much easier to say /contact.php rather than us a relative path.

/profile.html

<html>
<head></head>
<body class="profile">
<div class="dynamic image">
<ul class="menu">
</ul>
</div>
</body>

/contact.html

<html>
<head></head>
<body class="contact">
<div class="dynamic image">
<ul class="menu">
</ul>
</div>
</body>

style.css

/*
* consistent style definition for dynamic image class. These proprties
* remain consistent on every instance of .dynamic.image. We also
* set a default image here (profile).
*/
.dynamic.image {
width:766px;
height:348px;
background: transparent url(/images/profile.jpg) no-repeat 57px 0px;
text-align: left;
}

/*
* Here we override the default style using a selector specific to the page
* we are targeting. In this case the default image is profile so all we
* really need to override is the contact.
*/
body.contact .dynamic.image {
background-image: url(/images/contact.jpg);
}

SkyDesigns7

07-22-2008, 11:15 PM

I will check the thread you mentioned, your insights have definently cleared the smoke screen for me.

Thank you!

SkyDesigns7

09-01-2008, 09:35 AM

Thank you again Tz, the notes and your insight provided me with a ton of good stuff which is helping me chew through CSS faster.

Been doing tons of grunt work last few days, rebuilt flash gallery for all my new work, and another gallery for all of my photography...

Got everything the right size, probably 60-70 image files and i think about 20% from being complete... this work shift i started 2pm yesterday and its now almost 5am in the morning...

now my question is, this is what i have in showing in my DW window, all nice and neat, everything flush, menu showing at bottom...

http://www.graphicdesignforum.com/forum/attachment.php?attachmentid=5880&stc=1&d=1220257882

...so the flash gallery is the only thing there, my artwork can't be clicked, dragged, stolen, etc...

but what is showing in the preview window on safari and firefox is this:

http://www.graphicdesignforum.com/forum/attachment.php?attachmentid=5881&stc=1&d=1220257993

I added the white box to show where my lower menu is not appearing.

Idk if you need to see the code but here is for this page if helps showing what i did wrong?

SkyDesigns7

09-01-2008, 09:40 AM

and no joke Tz...

i have about 15 pages of notes i've written out trying to comprehend this...can't say its been a fun learning experience since i've about put my head through the wall trying to get some of this working.

but i don't feel as daft anymore...

09-01-2008, 11:56 AM

It would probably be best to post the mark-up and CSS so one of use can better assist you. From just looking at the images I don't really know what the solution is.

SkyDesigns7

09-01-2008, 12:49 PM

well here is the HTML from the portfolio page, begining to end:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Photography</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="photography">

<div id="header">
<ul class="menu">
<li><a href="index.html"><img src="images/Homebutton.jpg" alt="" width="73" height="57" border="0" /></a></li>
<li><a href="Profile.html"><img src="images/Profilebutton.jpg" alt="" width="94" height="57" border="0" /></a></li>
<li><a href="Portfolio.html"><img src="images/Portfoliobutton.jpg" alt="" width="81" height="57" border="0" /></a></li>
<li><a href="Photography.html"><img src="images/Photobutton.jpg" alt="" width="94" height="57" /></a></li>
<li><a href="Contact.html"><img src="images/Contactbutton.jpg" alt="" width="84" height="57" border="0" /></a></li>
</ul>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="766" height="510" title="Design Portfolio">
<param name="movie" value="flash/practice.swf" />
<param name="quality" value="high" />
<embed src="flash/practice.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="766" height="510"></embed>
</object>
</div>

<div id="footer">
<div class="copy">Dane-Designs © 2008 | Robin Oppenlander</div>
<div class="bottom_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li> | </li>
<li><a href="Profile.html">Profile</a></li>
<li> | </li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li> | </li>
<li><a href="Photography.html">Photography</a></li>
<li> | </li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

The object is just thrown in there, but in the space it needs to be...not sure if its a <div> or <ul> tag issue or a combo of both tags so it will sit correctly.

Two-Toe Tom

09-01-2008, 03:09 PM

We'd need the css as well to see what's wrong, but you should probably learn to use firebug, it's a free firefox plugin and I bet you can find the problem (and future css problems) pretty quickly with it.

Also, you should put img {border:0} in your css instead of doing it in your html.

09-01-2008, 04:58 PM

Just speculating here. If #header is floated than you need to add the rule #footer { clear:left; } so that the #header is properly cleared. Otherwise, your navigation will end up behind the #header div. Again… just speculating.

Furthermore, Two-Toe Tom is correct in suggesting an alternative method for your footer menu. General you should handle presentation such as borders with CSS. You can accomplish this using a the rule #footer ul li { border-left: 1px solid #000000; }. For more information regarding this technique though I encourage you to visit this (http://www.graphicdesignforum.com/forum/showthread.php?t=39144#edit557916) post were I have explained it in detail.

09-01-2008, 05:53 PM

html

<body class="photography">

<div id="page-wrapper">

<div id="masthead">

<ul class="primary navigation">
<li class="first home"><a href="/index.html">Home</a>
<li class="profile"><a href="/profile.html">Profile</a>
<li class="portfolio"><a href="/portfolio.html">Portfolio</a>
<li class="photography"><a href="/photography.html">Photography</a>
<li class="contact"><a href="/contact.html">Contact</a>
</ul> 

<object class="module flash" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="766" height="510" title="Design Portfolio">
<param name="movie" value="flash/practice.swf" />
<param name="quality" value="high" />
<embed src="flash/practice.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="766" height="510"></embed>
</object>

</div> 

<div id="content">
</div> 

<div id="footer">
<p id="copyright">Dane-Designs © 2008 | Robin Oppenlander</p>
<ul class="primary navigation encapsulate">
<li class="first"><a href="/index.html">Home</a>
<li><a href="/profile.html">Profile</a>
<li><a href="/portfolio.html">Portfolio</a>
<li><a href="/photography.html">Photography</a>
<li><a href="/contact.html">Contact</a>
</ul> 
</div> 

</div> 

</body>

css

#masthead ul.primary.navigation {
float:left;
}

#masthead ul.primary.navigation li {
float: left;
}

#masthead ul.primary.navigation li a {
display: block;
height: 57px
text-indent: -1000px;
}

/* lets style each primary link */

#masthead ul.primary.navigation li.home a {
width: 73px;
background: transparent url(/images/Homebutton.jpg) no-repeat top left;
}

#masthead ul.primary.navigation li.profile a {
width: 94px;
background: transparent url(/images/Profilebutton.jpg) no-repeat top left;
}

#masthead ul.primary.navigation li.portfolio a {
width: 81px;
background: transparent url(/images/Portfoliobutton.jpg) no-repeat top left;
}

#masthead ul.primary.navigation li.photography a {
width: 94px;
background: transparent url(/images/Photobutton.jpg) no-repeat top left;
}

#masthead ul.primary.navigation li.contact a {
width: 94px;
background: transparent url(/images/Contactbutton.jpg) no-repeat top left;
}

/* lets clear the primary nav */

#masthead .module.flash {
clear:left;
}

/* lets style footer navigation */

#footer ul.primary.navigation {
float:left;
padding: 0 10px;
}

#footer ul.primary.navigation li {
float:left;
}

#footer ul.primary.navigation li a {
display:block;
padding: 5px 10px;
border-left: 1px solid #000000;
}

#footer ul.primary.navigation li.first a {
border-left: none;
}

.encapsulate:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* IE7 still a bastard */
*+html .encapsulate:after {
display: inline-block;
display: block;
}

/* trigger hasLayout in <=IE6 \*/
* html .encapsulate {
height: 1%;
}
/* end trigger */

Classes are a powerful tool that not enough people leverage in my personal opinion. The beauty of classes they enable you to build relationship which other wise you could not with id's and you can use several per element. For example, take the body class. The body class is now semantically bound to it link because they share the same class. The same with the navigation. The navigation is really the same thing its location has just changed. Therefore, its perfectly acceptable to name it the same and using the cascade target it specific to its location rather than using an id. There, really isn't a need to use an id in this case for either. Now, both navigation elements are semantically the same thing just located in contrasting places.

In addition, generic classes give use code to reuse. Take for example the module class. The module class could be reused throughout for anything that "wraps" content. That's specifically what I use it for. So by creating generic classes and assigning them responsibilities you ultimately reduce code and in many circumstances make it more readable. I can't say its always more readable especially when you start to abuse the ability to use multiple classes per element, but in many cases if you leverage a bit of discretion it does. Another example of this is the first,encapsulate and navigation classes. They can all be reused avoiding crazy id name that no one understands.

Furthermore, you should try to avoid using presentational images in links. Links should generally amount to content. Then using CSS you should handle images by appending them to the background of the appropriate anchor.

Just a few tips. There's more, but for the most part the rest is explained in that post I linked to above.

SkyDesigns7

09-05-2008, 08:40 PM

I am almost done now with my entire site, i want to thank you again. the information you have given me has been a goldmine for me.

Both my portfolio flash file and all my photography has been loaded into the galleries now and its just a little fine tuning and then on to phase 2.

learning SEO and to blast anywhere and everywhere that i am available...

Tz, i am sending you an infinite amount of good vibrations and mojo... hope the karma fairy blesses you with an awesome weekend