CSS - Making A Box A Specific Size

Hey guys,

I am taking a computer science class at the moment and haven't received much direction on what to do.

I had to design an HTML website from scratch which wasn't hard but now I have to incorporate CSS into the website using an external stylesheet to edit the entire website.

I need to recreate these things and am wondering what I should be doing, any help is extremely appreciated.
It's a mock-business type website.

Here I have to have the picture on the left, a vertical line, and a paragraph on the other side, all within a border.

s1224.photobucket.com/albums/ee361/millihax/?action=view&current=staff-outline.gif

And here I have to make a table that looks exactly like this but without the "colour" column.

s1224.photobucket.com/albums/ee361/millihax/?action=view&current=staff-outline.gif#!oZZ1QQcurrentZZhttp%3A%2F%2Fs1224.photobucket.com%2Falbums%2Fee361%2Fmillihax%2F%3Facti on%3Dview%26current%3Dtable-outline.gif

Again, anything anyone can do for me is greatly appreciated as I am completely lost with this section of the assignment.

I just realized tonight that CSS I have been using with my XHTML 1.1 documents does NOT work with HTML 4 documents. Is this common? I never knew there was a difference in CSS functionality between doctypes.

Hi,

I'm trying to create a CSS for a specific table, not all tables,

the following code uses the code I need:

PHP Code:
 table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid grey;
padding:15px;
} 





How can assign/rename this to say mytable, if I change the top 'table' to .mytable still all tables on my page are changed

Thanks for any help.

Sanj

Hi,
I have a weird litlle problem here...

I have embedded a forum (invision) in my website. This forum uses a stylesheet for all its settings (duh).
I can choose if I want to use it inline or external.
Offcourse, my site also has its own stylesheet to work with.

Because the forum code is on a <div > in my site, the css from the forum messes up my site.

Is it possible to get the forum stylesheet to be only applicable inside the layer that it's on? Inline or linked?

I tried using an iframe instead of a div, but that gives a heap of other trouble (especially cookie-related) so that's not an option...

Hello Gents, I am trying to get ride of the white space above the menu and above the big sliding banner...Any pointers would be great. getyoursongsmixed.com/wordpress is my site

You guys rock thanks

If I want to have all of my <td> flags to look a certain way within a <div> tag but not anywhere else how do I define the style to do this?

For example lets say I have this line of code and I want to select the userid in order to style a particular user on a site/forum.


<div class='username'>Test <span class='userid'>(223647)</span></div>

How do I go about selecting the 223647 ID so I can assign it a specific style?

Thank you in advance for any help.

Hi,

I've seen things like this in CSS elsewhe

Code:

<style type="text/css"><!--
td[width="350"] {
    background-color: #FFFFFF;
}
--></style>

The above is just an example, and it might not even be what I'm looking for. But it appears that the above would only change the background color of a table cell that is 350 pixels wide (no other table cells will be changed)?

Is this how this is done? And if not, I'm trying to do something along that concept, somewhat like this:

Code:

<style type="text/css"><!--
table[border="2"] td .classname {
    color: #FFFFFF;
    font-family: verdana;
}
--></style>

If this doesn't make sense, I'll try to reexplain.

But if this can be done I'd be ever so grateful.

Thanks!
~Kevin

I have a site www.carrie-anne.co.nz just refer to index.asp
It has 3 css. I have a problem with main.css

The problem is minor, but annoying. It is to do with the lhs menu called menucontainer. The menu is a list and the rules applied to it are quite specific.

Below menucontainer is contactcontainer and that too has specific rules.

What happens is that I am getting the menu text underlined when I state that decoration:none; On further testing by commenting out rules ( so they don't render ) I find that rules for contactcontainer are over-riding menucontainers.

Can anyone shed any light? It is driving me spare..
Here is the css file.
Code:

body {
	background-color: black;
	background-image: url(web_images/layout/carriebackground.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 0px;
	margin-left: 80px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-attachment: fixed;
}


#container {
	width: 800px;
}
#taglinecontainer {
	width: 410px;
	padding: 0px;
	margin-left: 380px;
}


h1#carrieheadingmodelling {
	background-image: url(web_images/layout/modelling.jpg);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 30px 0px 0px;
	overflow: hidden;
	height: 0px;
	
}

h1#carrieheadingacting {
	background-image: url(web_images/layout/acting.jpg);

	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 32px 0px 0px;
	overflow: hidden;
	height: 0px;
}


h1#carrieheadingpromotional {
	background-image: url(web_images/layout/promotional.jpg);
	
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 39px 0px 0px;
	overflow: hidden;
	height: 0px;
}
h1#carrieheadingtop {
	background-image: url(web_images/layout/carrie_anne_freeman.gif);
	height: 0px;
	
	background-color: transparent;
	background-repeat: no-repeat;
	margin: 0px;
	overflow: hidden;
	padding-top: 61px;
	background-position: right top;
}
/*------------------------------Menu stuff----------------------------------------------------*/
#_____________________________{}

#menucontainer {
	width: 220px;
	margin-top: 50px;
	border-right: #330099;
	border-bottom: #333399;
	border-left: #336699;
	padding: 0px;
	margin-bottom: 30px;
	height: 325px;
	background-image: url(web_images/layout/menubackgroundtrans.png);
	text-decoration: none;
}
h1#selectacatergory {
	background-image: url(web_images/layout/menu.gif);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding: 38px 0px 0px;
	overflow: hidden;
	height: 0px;
	position: absolute;
	width: 222px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	/* if ie- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='web_images/layout/selectacatergory.png');*/
}


#container #menucontainer ul {
	width: 222px;
	margin: 39px 0px 0px;
	padding: 0px;
	list-style-image: none;
	list-style-type: none;
	height: 240px;
	position: absolute;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;	
	text-decoration: none;
}
#container #menucontainer li {
	margin: -10px 0px -12px;
	padding: 20px 0px 6px 34px;
	display: block;
	height: 20px;
	background-image: url(web_images/layout/butterfly.gif);
	background-repeat: no-repeat;
	background-position: 0px 11px;
	border-bottom: 1px dotted #000000;
	text-decoration: none;
}
#container #menucontainer ul li a:link, a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #FF6633;
	font-weight: bold;
	text-decoration: none;
	margin-left: 3px;
}
#container #menucontainer ul li a:hover {
	color: #FFFFFF;	
	text-decoration: none;
}
#container #menucontainer ul li a:active {
	color: #FF6633;	
	text-decoration: none;
}

#container #menucontainer  ul li#current {
	margin: -10px 0px -12px;
	padding: 20px 0px 6px 34px;
	height: 20px;
	background-image: url(web_images/layout/butterfly_current.gif);
	background-position: 0px 11px;
	border-bottom: 1px dotted #000000;
	display: block;
	text-decoration: none;
}

/*Contact Section*/
#________________________________________{}
#contactcontainer {
	width: 225px;
	position: absolute;
	margin-top: 47px;
	background-image: url(web_images/layout/menubackgroundtrans.png);
	padding: 0px;
}


h1#contactme {
	background-image: url(web_images/layout/contactme.gif);
	background-color: #000000;
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding: 42px 0px 0px;
	overflow: hidden;
	height: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 225px;
}

#contactcontainer ul {
	margin-top: 10px;
	margin-bottom: 20px;
	list-style-type: none;
	padding: 0px;
	width: 182px;
	margin-left: 42px;
	z-index: 1;
}
#contactcontainer li {
	list-style-type: none;
	color: #FF6633;
	line-height: 2.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .85em;
	margin: 0px;
	padding: 0px;
}
#contactcontainer li a:link, a:visited {
	list-style-type: none;
	color: #FF6633;
	line-height: 2.5em;
	text-decoration: underline;
	margin: 0px;
	padding: 0px;
	position: relative;
}

#contactcontainer li a:hover {
	list-style-type: none;
	color: #FFFFFF;
	line-height: 2.5em;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	position: relative;
}
.photoholder {
	display: block;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	width: 222px;
	height: 207px;
	border-top-width: 0px;
	border-top-style: none;
}*/
#______________________rightcontent________________________{}
#rightcontent_holder {
	width: 545px;
	position: absolute;
	margin-left: 250px;
	margin-top: -324px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	background-image: url(web_images/layout/large_blackbutterfly.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#rightcontent_homepage {
}
#flow01, #flow02, #flow03, #flow04, #flow05, #flow06, #flow07{
	float: right;
	clear: right;
	margin: 0 0.5em 0 0;
}
#flow01 {width:250px; height:80px;}
#flow02 {width:275px; height:60px;}
#flow03 {width:285px; height:42px;}
#flow04 {width:300px; height:80px;}
#flow05 {width:200px; height:50px;}
#flow06 {width:150px; height:45px;}
.hidecap {
	display: none;
}
.homepagewelcometext {
	background-image: url(web_images/layout/Welcome_w.gif);
	background-repeat: no-repeat;
	text-indent: 53px;
	font-size: .75em;
	line-height: 2em;
	color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 10px;
}
.signature {
	background-image: url(web_images/layout/carrie_sig.gif);
	height: 75px;
	width: 200px;
	margin-left: 21px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 50px;
	background-repeat: no-repeat;
}
#-----------------------footer---------------------{}
#footer {
	background-color: #00264C;
	border: 1px solid #166286;
	margin-bottom: 5px;
	margin-top: 35px;
	position: relative;
	width: 550px;
}
#footer p {
	color: #FF6600;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: .6em;
	text-align: center;
	margin-bottom: 8px;
	margin-top: 8px;
}
#crediting {
	color:#000000;
	margin: 0px;
	padding: 0px;
	display: block;
	width: 500px;
}
.footerimages {
	background-color: #000000;
	margin-left: 48px;
}
.credittext {
	color: #E17717;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	margin: 0px;
	padding: 0px;
}
.standardcopy {
	font-size: .75em;
	line-height: 2em;
	color: #CCCCCC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-top: 10px;
}
#confirmation_holder {

	width: 500px;
	position: absolute;
	margin-left: 275px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

div#crediting a#link, img {
	text-decoration: none;
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: none;
}

This is a bit puzzling for me. I read that I can apply css to something based on id, which I have been doing, thats how my template is made, USING CSS :S.

I need to apply css to an H2 that already has css applied to it but has a different id.


Here is the page I need to do it to, view it and see why I need to.

http://www.coldfusionzone.com/index.php?p=7

Look down towards where the comments are and youll see
Leave a comment


I need to change that to where it expands up to 40 pixels from the side, and has a black background without the stinkin date pic next to is .

Now that Im talking about it im confused again. Ha ha I had it down pat but now that I need help im confused thats strange.

But I need to apply a css style to it when it already has a css it....


Here the css style that controls it is on top and the css style im trying to use is on the bottom.

PHP Code:
 div#content h2 {
       background: #000 url(images/date.jpg) no-repeat left center;
       background-color: #232323;
       color: #5F5F5F;
       padding: 2px 15px 2px 85px;
       border: 1px solid #494949;
       margin-left: 40px;
       margin-right: 220px;
       margin-bottom: 10px;
       margin-top: 0;
       font-size: 95%;
       font-weight: normal;
   }
   div#content#postcomment h2 {
       background: #000;
       background-color: #000000;
       color: #5F5F5F;
       padding: 2px 15px 2px 85px;
       border: 1px solid #494949;
       margin-left: 40px;
       margin-right: 220px;
       margin-bottom: 10px;
       margin-top: 0;
       font-size: 95%;
       font-weight: normal;
   } 

The title might seem like an oxymoron, but here follows what I want to do, for a navbar I am making, where the links are divided into categories, each with their own header div, I do not want those header divs to be visible unless there is any content (text) in them, but at the same time, if there is content in them, I want them to take specific dimensions.

Is there a way to achieve this? That is, either do not appear at all, but if it is to appear, it is to be a certain specified height and width. The min- and max width/-height's do not do the trick here, however I suspect I am far from the first to want to do this so there ought to be a hack or solution of some sort.

Maybe I should add that it is only the height that is an issue here really. I want it to be 19px lest not appear at all.

URL
(Why doesn't the image show up?)
http://drupal.org/files/issues/browser%20view.jpg

The small div with the class "left" doesnt stretch to 100%. What could be the problem?

Here is the html:
Code:

<div class="content-wrapper">
        <div class="top">
              <div class="left"></div>
              <div class="center"></div>
              <div class="right"></div>
        </div>
        <div class="content">
              <div class="left"></div>
              <div class="center">
              <div id="content" class="column"><div class="section"></div>
              <div class="right"></div>
        </div>
        <div class="bottom">
              <div class="left"></div>
              <div class="center"></div>
              <div class="right"></div>
        </div>
</div>

And here the CSS:
Code:

.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom,
.content-wrapper .left,
.content-wrapper .center,
.content-wrapper .right {
float: left;
}

.content-wrapper .top,
.content-wrapper .content,
.content-wrapper .bottom {
width: 100%;
padding: 0px 8px;
}

.content-wrapper .center {
width: 100%;
}

.content-wrapper .left,
.content-wrapper .right {
height: 100%;
min-height: 100%;
}

.content-wrapper .left {
width: 8px;
margin-left: -8px;
background: url("../images/side_left_bg.png") repeat-y;
}

.content-wrapper .right {
width: 8px;
margin-right: -8px;
background: url("../images/side_right_bg.png") repeat-y;
}

.content-wrapper .top,
.content-wrapper .bottom,
.content-wrapper .top .center,
.content-wrapper .bottom .center {
height: 9px;
}

.content-wrapper .top .left {
background: url("../images/edge_top_left.png") no-repeat;
}

.content-wrapper .center {
background: white;
}

.content-wrapper .top .right {
background: url("../images/edge_top_right.png") no-repeat;
}

.content-wrapper .bottom .left {
background: url("../images/edge_bottom_left.png") no-repeat;
}

.content-wrapper .bottom .center {
background: url("../images/bottom_bg.png") repeat-x;
}

.content-wrapper .bottom .right {
background: url("../images/edge_bottom_right.png") no-repeat;
}

Any help on this would be very appreciated! Thanks in advance!

Let's start off with the code:
Code:

<div class="tuts_900">
	<h1>Recent Tutorials</h1>
	<img src="tutorial_avatars/vendetta.gif" width="60" height="60" alt="Vendetta Upper Deck" title="Vendetta Upper Deck" align=
"left" border="0" />
	<h2>Vendetta Upper Deck</h2>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ornare. Nam tincidunt ultrices libero.
	<p>Submitted Oct. 20, 2006 | <a href="">View Tutorial</a><img src="sitegfx/tuts_orange_arrow.gif" width="13" height="7" alt=
"" title="" border="0" /></p>
	</div>

What I'm trying to do is specifically target the <img> tag withint the <p> tag that's within the tuts_900 div.

I tried this: div.tuts_900 p img { asdfgasdgfgasdasd }; with no success.

How can I do this? Thanks.

Hi, I am redesigning my site using CSS. My site consists of various
forms for which I currently direct output to specific frames.

Now I am tossing the frames and using css with div's. I have
a two column layout with various search features and drop-down
menus in the left div. I would like to have the output from the form placed in the right div. Currently I do this with a target=""
in my form call.

What is the easiest way to do this with css and div's.

Any pointers would be greatly appreciated.

R Haynes