|
CSS - Css Help: Need To Recreate Specific Example
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¤t=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¤t=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. Similar TutorialsCurrently this page... http://w ww.theskyfactory.co m/catalog.php?list=Popular§ion=c ... is constructed using PHP and crude tables to output some images into rows of 3 based on what the user is looking for. I'm trying to make the page without using any tables and my latest attempt is here... http://ww w.theskyfactory.co m.mx/images/NEW/test.php What I can't figure out is how to make the tan boxes around the images stretch to fit the largest image in each row. could someone give me some tips? Thanks. Edit: Sorry for the filter circumvention... It wouldn't let me post links. 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 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; } 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;
}
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 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? Hi, I need to make colored boxes a specific height. Also, the box must stretch to fit the text within it. The text will be updated when a user clicks different nav buttons. Here's my code:: Code: .category{
background-color:#8CC63F;
color:#000000;
font size:21pt;
height:36px;
}
the problem is that the box isn't 36 pixels tall. you can see my example he link Look at the box with the text description, and the box that says "cam tu dao". Any ideas. I've been trying everything I could think of. thanks 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 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 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... 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. 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. 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! when i edit my CSS file and when i use classes, i use multiple ones. for example, for the top paragraph it a div right after my <h2>, i say Code: <p class='notopmargin aligncenter green'>Blah blah blah</p> should i be making classes specific to this kind of paragraph? like Code: <p class='greencentertop'>Blah blah blah</p> which way is better? my thought is that i am using a bad habit, because it will be hard to use when i am coding a new paragraph unless i know exactly what i do every other time. on the other hand, reusing classes makes the file smaller and the loadtime for my site will be faster. thoughts, any1? 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 I have a unique problem: I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:
<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>
which works, but only in firefox, and not IE7, or Google Chrome. I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should Hi: As strange as it may seem, I need to hide the characters "<br>" (the line break characters between the quotes) on a form. The element is .ms-RadioText. Example: Current View: <br> - option 1 <br> - option 2 Desired View: - option 1 - option 2 Possible? Thanks- Charlie Epes Buffalo, NY A web site I am working on is artepizzeria.com and for some reason it is not rendering correctly in internet explorer version 6. The content is just disappearing completely. Your help is much appreciated. -Troy Oltmanns |
|||||||