CODEWITHSUNDEEP
htmlcss
user1278496
user1278496

Reputation: 1066

Keeping the same style in each page but sometimes having an element that is slightly different

I have a situation where I am using a list of images on certain pages of my website. Say I have a list that appears horizontally in one page but I want the same list to appear vertically in another page, would I have to create a whole new div so that one list appears horizontally and the other vertically like this:

#imagevertical {
}

#imagehorizontal {
}

This doesn't seem that bad but where you have lots and lots of web pages that you want your image list appearing slightly different in each one, it can be fairly messy.

Is there any alternative ways of doing this?

Thanks guys

Upvotes: 0

Views: 73

Answers (2)

NullPoiиteя
NullPoiиteя

Reputation: 57312

Make an external style sheet and put the style in every page and you make the slightly different on by CSS providence.

external < internal < inline

You can also use !important.

The style is different if you create conflicts in style.

Upvotes: 1

DavW
DavW

Reputation: 886

You don't need to change the name of the div on each page, just the style that's applied to it, so use a div called "imagelist" and apply all common styles in the stylesheet, then extra style to the page itself.

In CSS:

#imagelist { common styles...}

In one HTML page:

<style type="text/css">
    #imagelist { something that makes it vertical... }
</style>

In the other HTML page:

<style type="text/css">
    #imagelist { something that makes it horizontal... }
</style>

The in-page styles will override those imported from the external stylesheet, then there's no need to change the name of the div and re-specify all the common styles between the two.

Alternatively, you could create horizontal and vertical classes for this:

CSS:

 #imagelist { common styles... }
 .horizontal { something that makes it horizontal... }
 .vertical { something that makes it vertical... }

HTML for horizontal page:

 <div id="imagelist" class="horizontal">content...</div>

HTML for vertical page:

 <div id="imagelist" class="vertical">content...</div>

I think this might be a better solution than the first.

Upvotes: 1

Related Questions