|
CSS - Adding Css To Xml
Does anyone no some really good resources of info for adding css to xml.
Similar TutorialsI promise once I become more versed in the mechanical rather than graphical side of web design, I'll start giving back more. But untill then... I have several div's, all absolutly positioned, but I need this one, (see attached picture) it is the bottem right div, that will have several above and several div's above it. I need to know how to do this without absolute positioning. Because with absolute positioning, I would have to manually resize each time I do an update. Thanks, -Sam I have a page with a header, two column, and footer layout. For some reason, IE is adding 5px to the left column of the page. Here is the relevant css code. Code: #container {
width:770px;
margin:0px auto 0px auto;
background:#ffffff;
text-align:left;
}
#header {
position:relative;
width:770px;
height:109px;
background-image:url(images/header.jpg);
background-color:#ffffff;
text-align:center;
}
div#leftcontainer {
float:left;
width:190px;
background-color:#ffffff;
}
div.leftcontent {
width:190px;
background-color:#004994;
padding-left:5px;
padding-right:5px;
}
div#centercontainer {
margin-top:3px;
float:right;
width:570px;
background-color:#ffffff;
padding:0px;
}
div.centercontent {
width:560px;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
}
#footer {
clear:both;
padding:4px;
width:770px;
font-size:.8em;
font-family:arial, sans-serif, courier;
color:#ffff00;
background-color:#004994;
margin:0px 0px 20px 0px;
}
Now everything goes inside the leftcontent and centercontent classes. It displays perfectly in Firefox but IE is adding 5px on the right side of the leftcontent section which is pushing all the centercontent down. Any ideas what is causing this? I thought I got away from the IE box model bug by using boxes inside boxes. Thanks in advance. How can this be fixed? Code:
<table border=5 cellpadding="0" cellspacing="5" bordercolor="#cc66cc" >
<tr>
<td> </td>
<td> </td>
</tr>
</table>
firefox is doing like a bordercolorlight/dark combo out of my bordercolor, but IE is fine.. see ss's. hi I have a long list of images positioned absolutely, and vertically down the page. However, if I wanted to add a new image to the top of the list... how can I do this without having to change all the positioning values of the other images? cheers nathan I am wondering if it is possible to include a line break within the content area of the :after pseudo element. I would like to create a class that adds text following an image, i.e. .click_for_larger:after { font-size: 0.8em; content:"<br />- Click for larger version -"; } Of course, in this example the "<br />" would be printed. Is there any way to indicate that there should be a line break before the text is displayed? Cheers - george I was wondering how I can set a font that others may not have on there computer. I know I can set a font folder for my site but how do I link to that so that if the viewer doesn't have the font so it will still display correctly for them too? What type of font extension should I put in there? Should it be just the .ttf? Are there any special css rules that I must include? Thanks for the help! I have been working on a school project and I need to add last column and create another row on the bottom and apply that data to a total using CSS. Here is my xml code Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Groceries</title> <!-- This code links my style sheet to my html document. --> <link rel="stylesheet" type"text/css" href="p1b.css" /> </head> <body> <h1>Grocery List</h1> <table border="1"> <tr> <th>Item</td> <th>Manufacturer</td> <th>Size</td> <th>Unit Price</td> <th>Quality</td> <th>Total Price</td> </tr> <tr> <td>Corn Flakes</td> <td>Kelloggs</td> <td>18 oz</td> <td>2.50</td> <td>1</td> <td>2.50</td> </tr> <tr> <td>Solid White Tuna</td> <td>Starkist</td> <td>5 oz</td> <td>2.79</td> <td>2</td> <td>5.58</td> </tr> <tr> <td>Cream of Mushroom Soup</td> <td>Cambell's</td> <td>10.75 oz</td> <td>1.00</td> <td>2</td> <td>2.00</td> </tr> <tr> <td>2% Lowfat Milk</td> <td>Safeway</td> <td>0.5 gal</td> <td>1.99</td> <td>1</td> <td>1.99</td> </tr> <tr> <td>Extra-Wide Egg Noodles</td> <td>Golden Grain</td> <td>12 oz</td> <td>0.87</td> <td>3</td> <td>2.61</td> </tr> </table> </body> </html> and here is my CSS code Code: /* CSS Document p1b */ { background-color:white; } /* this is where I change the lins in the table */ table, th, td { border:0px; border-collapse:collapse; text-align:left; padding:5px } table { padding:10px; border:10px solid #d0d0ff; margin:20px; }
Can anyone help I'm trying to add the total prices column and creating another row that shows Total. I have set up some links at the top of the page, and to make them appear more like buttons I have applied a background colour and border around them. Works a treat in Opera, Mozilla but IE is only showing the side border.. If I add a display type of BLOCK they run down the page as I expected but the borders are added right the way around. I have loaded the code for people to look at, from what I can see Im doing it correct, but not correct enough it seems. Code:
CSS
#nav {
position: absolute;
width: auto;
top: 112px;
left: 10px;
background-color: #ffffff;
z-index: 4;
}
/* If I add ':link' to the top selector the background and all borders drop off aswell as colour.*/
#nav a {
color: #203F71;
font-weight: bold;
text-decoration: none;
background-color: #FFFF00;
border: solid 1px #000000;
padding: 1px 5px;
}
#nav a:hover {
color: #FFFF00;
text-decoration: none;
background-color: #203F71
}
#nav a:active {
color: #203F71;
font-weight: bold;
text-decoration: none;
}
HTML
<div id="nav"><a href="#2" class="navLink">Property Search</a> <a href="#3">Services</a> <a href="#4">Holiday Letting</a> <a href="#5">Bayside Team</a> <a href="#6">Contact Us</a></div>
Okay... I'm working more with CSS these days, and am trying to accomplish something that I can't figure out... I know that I can create a div, assign a specific size, and background image, and then inside that div, I can add an empty href tag with a display:block and height assigned, and the entire div is linked, the same as linking the image itself... What I'm trying to accomplish is the same thing, only with a div that has textual content.... I could throw the href tag outside the div, but it isn't valid XHTML 1.0, and throws warnings... I've tried display:block, and height as usual, and even tried throwing the z-index on top of the other items, and with a clear:none; but to no avail.... I hope this is a decent enough description of the problem... anyway to accomplish this??? Having a little trouble. I'm creating a horizontal nav menu with a bg image for each li, but can't seem to get the height set for the li in css. Using this code: Code: nl#navBar {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
nl#navBar li{
list-style-type: none;
display: inline;
}
nl#navBar li a:before {
content: url(../images/navbutton_left.gif);
}
nl#navBar li a:after {
content: url(../images/navbutton_right.gif);
}
nl#navBar li a{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg.gif);
}
nl#navBar li a:hover{
text-decoration: none;
background-repeat: repeat-x;
background: url(../images/navbutton_bg_hover.gif);
}
I have tried several different variations of code putting height attributes and displays as block, but no combination seems to work. hello there i am starting my own site pretty soon and i am stuck at the final desgin stage and i tryed everything to edit the .css and add images and so did the guy i hired to install the script the site is koooraup.com as you can see i have 2 blank spaces on both sides what i want to do is the following add about 4 logos at each side like the EPL logo i got all the logos ready but i couldnt figure out how to add them so can some one help please here is the .css contents Quote: body{ background:#48494B; } #mainc{ width: 780px; background-color:#FFFFFF; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; border: 10px solid #FFFFFF; } #header{ margin: 0 auto; width: 780px; background-image:url(/images/h_bg.gif); background-repeat: repeat-x; height: 169px; } #hd_top{ margin: 0 auto; width: 780px; height: 42px; background-image: url(/images/hd_top.gif); } #hd_down{ width: 780px; margin: 0 auto; height: 36px; } #container{ width: 780px; margin: 0 auto; background-image:url(/images/b_bg.gif); background-repeat:repeat-y; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; color:#FFFFFF; } fieldset#formwrap { border : 0; } /* section fieldsets - it's common to make this border : 0; */ fieldset { border : 0; } #footer{ text-align: center; width: 780px; height: 23px; padding-top:5px; background-image:url(/images/f_bg.gif); background-repeat:repeat-x; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; } #browse{ width: 434px; height: 30px; background-image:url(/urlbox.gif); padding-left: 40px; } #input{ background-image: url(/urlbox.gif); no-repeat; border: none; padding-left: 40px; width: 474px; height:30px; font-size: 18px; } table, td{ font:100% Arial, Helvetica, sans-serif; } table{width:100%;border-collapse:collapse;margin:1em 0;} th, td{text-align:center;padding:.5em;border:1px solid #fff;} th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;} td{background:#ffffff;color:#000000;} /* tablecloth styles */ tr.even td{background:#e2e2e2;} tr.odd td{background:#e2e2e2;} th.over, tr.even th.over, tr.odd th.over{background:#ff1933;} th.down, tr.even th.down, tr.odd th.down{background:#bce774;} th.selected, tr.even th.selected, tr.odd th.selected{} td.over, tr.even td.over, tr.odd td.over{background:#bce774;} td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;} td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;} /* use this if you want to apply different styleing to empty table cells*/ a { color:#FFF; text-decoration:none; border-bottom:2px dotted #CE3939; font-size: 15px; } .file_1 { background: url('images/urlbox.gif') no-repeat; border: none; padding-left: 40px; width: 434px; height:30px; font-size: 18px; } #credit { text-align:center; font-family: Arial, Helvetica, Verdana, sans-serif; font-size:small; padding-top:3px; } #credit a { color:#000; text-decoration:none; border-bottom:none; font-size: 13px; } #credit td ( background:#48494B; color:#000000; } #div_file{position:static;left:-9999px;} #div_url {position:absolute;left:-9999px;} and if possible make the background black thanks alot in advanced i been trying to do this for the last 2 days regards ahmed Hello everyone, I have this issue where Firefox keeps making unwanted spaces between the headers/dividers of my content. My page is located at: hainescityhighschool(dot)com/development/beta (please view in both IE and Firefox to get the idea) I can't post links because of my user status but that should be a valid URL. Anyways, Firefox 3.0 is the version I'm having problems with. I haven't tested it in other versions. Where it says welcome, I want the divider image to be almost directly underneath it, and in IE it works. Only firefox seems to have an issue. Any ideas? Hi all, with your great help, the pages looks now almost fine in both IE and FF. But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential. So, is there please any solution to handle this? And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>. Here are CSS used: Fotogalerie.css, Web.css. Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before ) Hi, I have a new template, and a new separate menu; the code has been validated on both. I'm having trouble adding the new menu to the new template, replacing the menu that came with the template. What I would like to do is embed it if possible so when I add content I won't have to change the menu on 400 different pages; also this is a nice menu with lots of code in the html. Is it possible to embed a menu from a root file with a small code? If not how do I add the huge code to my template? I have tried putting it on the top but the drop down doesn't work and parts of it are obscured by the content on my page. If I put the menu about half way down my page it works alright, but I need it on the top. (I tried to post the urls below but the forum rules prevent new members from doing so.) I know this is a lot of info, but I hope you can help me, if so I really appreciate it. Thanks, Dave I am having what seems like the most elementary problem, yet I cannot figure out what is causing it. I am creating DIVs and nested DIVs to position, contain and format my content. And for some reason, adding padding to a style applied to a given DIV is causing that DIV to expand by the amount of padding added. So for example, if I have a style: Code: #contentBox {
width: 500px;
background-color: blue;
}
And apply it like so: Code: <div id="contentBox">My content goes here</div> It displays as it should: a blue box that is 500px wide. But if I change the style to add padding to the box likee so: Code: #contentBox {
width: 500px;
background-color: blue;
padding: 10px;
}
The blue box is now 520px wide (it added the 10 px of padding on either side to the overall width. I thought that the padding was included in the width of a box so that changing the padding would not change the amount of space occupied by that element. Am I wrong or missing something here? I want to add some color to my HR's. Here's what I do to support IE and Netscape: Code:
hr {
width:400px;
height:5px;
color:green; /* IE */
background-color:green; /* NS */
}
Which is the web standard? Color or background-color? I have a site I am constructing in CSS. It looks good in most browsers, except one -- IE 6 PC. There is a gap between images (on the right top) and I can't figure out why http://www.arrivalband.com/test/ Here's the css code (the offending code seems to be in rightCOL). My guess this is something that is pretty usual with IE, but I don't know a good work around. Thanks for the help in advance. For some reason, when the image with the title of the page is two lines, in this case "Tax Service and Consultation" it bumps the content down in the div to the right, but only in IE and only if it is on two lines. I have an image illustrating what I mean but this awesome site won't let me post web addresses on it, WTF? I can send anyone a link to explain what I mean. The css and html validates. I cannot figure out what I am missing with this. Any help or suggestions will be greatly appreciated Thanks, Billy hi im trying to add the class "current" from this menu Code: http://www.cssplay.co.uk/menus/pro_dropline.html second example Quote: ...with top level 'current selection' tab to this menu Code: http://www.cssplay.co.uk/menus/pro_left_right_line.html appreciate any help |
|||||||