|
CSS - Unique Horizontal Rules: Techniques?
Hey all,
What are your techniques for making unique horizontal rules? At the moment I am using this code to separate content: Code:
/* CSS */
.line {
height: 5px;
background-image: url(../img/bg_3x7.gif);
background-repeat: repeat-x;
background-position: left top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
padding: 0px;
}
Html: Code: <div class="line"></div> The above code works great for all non IE-PC browsers... when I view on PC with IE, there appears to be 5px of padding added to top and bottom... is very annoying... IE is a POS, I hate IE... Anyway, does anyone have any suggestions for a more universal way to get a unique <hr /> on a page? I would prefer something that will be an exact height in any browser/platform. Cool cool cool, Thanks! Cheers Micky Similar TutorialsI'm using this for a horizontal rule, I'm after a 1 pixel blue line... Code:
hr {
border: 0;
width: 98%;
height: 1px;
color: #003366;
}
But while I get what I'm after in IE, in Firefox there is nothing, zip, no line at all. What's wrong? Hey DevShed, I'm having issues with the CSS, and floats. I basically float everything to the left, and I'm having issues on the very far right with a space I cant fill basically, and on the left side I'm missing the 1px border from my wrapper div. The "user" div is supposed to be a few pixels wider, I chopped off some pixels because when I made it longer it dropped down to below the "adheader" div. Here's my current code; index.php PHP Code: <body> <div id="wrapper"> <div id="topnav"></div> <div id="banner"> <img src="images/banner.jpg" /> </div> <div id="header"></div> <div id="left_content"> <div id="newsheader">Latest news</div> <div id="box_1"> <img src="images/news.jpg" /> </div> <div id="box_2"> This is content blah blah blah </div> <div id="bottom_left"> </div> <div id="bottom_right"> </div> </div><!--end of left_content--> <div id="right_content"> <div id="adheader"></div> <div id="user"></div> <div id="main_content"></div> </div><!--end of bottom_right--> </div><!--end of container--> </body> global.css PHP Code: #wrapper { margin: 0px auto; padding: 0px; width: 977px; border-left: 1px solid #B1B1B1; border-right: 1px solid #B1B1B1; } #topnav { background: #F0F0F0; background-image: url('images/top_back.gif'); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 977px; height: 18px; } #banner { background: #282828; background-image: #url('images/banner.jpg'); border-bottom: 5px solid #D2D2D2; margin: 0px; padding: 0px; width: 977px; height: 72px; } #left_content { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; padding: 0px 0px 0px 0px; width: 476px; height: 100%; float: left; } #newsheader { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; margin: 0px 0px 0px 0px; padding: 0px; width: 476px; height: 29px; } #right_content { background: #282828; padding: 0px; margin: 0px; width: 495px; height: 100%; float: left; } #box_1 { background: #6D6D6D; padding: 0px; margin: 0px; width: 476px; height: 249px; } #box_2 { background: #DADADA; padding: 0px; margin: 0px; width: 476px; height: 96px; } #bottom_left { background: #DADADA; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; padding: 0px; margin: 0px 1px 0px 0px; width: 236px; height: 29px; float: left; } #bottom_right { background: #DADADA; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-left: 1px solid #FFF; padding: 0px; margin: 0px; width: 237px; height: 29px; float: left; } #lnewscontent { background: #DADADA; border-right: 1px solid #FFF; padding: 0px; margin: 0px; width: 476px; height: 96px; } #adheader { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-right: 1px solid #FFF; border-left: 1px solid #FFF; margin: 0px 0px 0px 1px; padding: 0px; width: 209px; height: 29px; float: left; } #user { background: #6D6D6D; background-image: url('images/div_back.gif'); background-repeat: repeat-x; border-left: 1px solid #FFF; margin: 0px 0px 0px 1px; padding: 0px; width: 281px; height: 29px; float: left; } Here's a basic idea of what I'm going for: img683.imageshack.us/img683/6540/layoutsamp.gif PLEASE help me, I've been going at this for hours. I'm out of ideas! What are the naming rules for CSS? No numbers in class names? Any other char not OK? 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;
}
Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help Hi guys and gals. Right does any one know any CSS specfic Internet Explorer 8 rules that I can run in the CSS sheet. Something like -ie- -msie- would be nice. Also for those of you who have not tried IE8 beta download it , it's really good, ok still bugs to work out fair enough but what I'm really fond of is the built in dev bar that comes as standard, if there is an add-on like Yslow I think I'm going to convert. So the basic rules a 1) Author style sheets 2) User style sheets 3) Default browser sheets Now when you get into Author style sheets... You have: inline styles, header style information (<style type="text/css"> </style>), external style sheets and imported style sheets. I created a little example for myself to figure out the precedence. So that if all of these methods controled the same element, which method's style would come out the winner. To my suprise, the order in which you include them in the HTML document has an impact on the precedence. How so? Up until now I thought that the order of precedence was: inline styles, imported styles, external style sheets (<link />), and header style information. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: green;">What am I?</p>
</body>
</html>
As expected, the inline style wins. Code:
<html>
<head>
<link href="link.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
</head>
<body>
<p>What am I?</p>
</body>
</html>
The header style information wins. (regardless of position of @import) Code:
<html>
<head>
<style type="text/css">
@import url(import.css);
p {
color: blue;
}
</style>
<link href="link.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>What am I?</p>
</body>
</html>
External style sheet wins (<link />). How does position influence precedence of: external style sheets (Both @import and <link />) and header style information? I was reading that if you wanted to apply the same style to more than one rule, you can use a comma, but I'm having a weird quirk happen when I do that. for example: h1, h2 {color:olive;} For some reason, it's only applying to h2. Even when I place it so that there are no parent elements. I've validated the xhtml and the css. What's the deal? I'm a total newbie to CSS and web design in general. Sorry if I'm using the wrong terms for things. I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page. My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Quote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. I'm trying to figure out how to do something that I'm sure is possible in CSS, but I haven't seen an example of it anywhere yet. I would like to create a grid. The boxes in the grid would contain text, and when you mouse-over that box it would change to different text. The idea behind this is that in the top row you would have a problem. Then if you follow the column down from that problem you would see the name of a product, and when you mouseover the name of the product, the text changes from the name of the product to the solution the product offers. Hopefully I didn't convolute that too much. Has anyone seen something like this that might steer me in the right direction? Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. I don't have an external webserver so i'll explain as best I can. I have a left and right section of my webpage each with their own background. The problem is a white gap between to the two backgrounds. I set the margin and padding on everything to 0 and it has no effect. This occurs in IE and FF. PHP Code: <html> <head> <style> body {margin: 0; padding: 0;} .left {float: left; background-image: url('background_left.jpg'); height: 100%; width: 300px; background-repeat: no-repeat; background-attachment: fixed; margin: 0; padding: 0;} .right {background-image: url('background_right.jpg'); background-repeat: repeat-x; height: 100%; margin: 0; padding: 0;} .menu {} .content {} </style> </head> <body> <div class="left"> <div class="menu"> </div> </div> <div class="right"> <div class="content"> </div> </div> </body> </html> In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar? This is the HTML: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}
#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/
#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}
#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }
#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }
H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}
-->
</style>
</head>
<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr height="435">
<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">
<div id="contentRight"><br>
<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this? Code: <div id="nav_wrapper"> <div id="nav_bar"> <div id="nav_content"> <ul id="nav_ul"> <li><a href="/">Home</a></li> <li><a href="/forum/">Forum</a> <div class="nav_subcontent"> <ul> <li><a href="/forum/search.php">Search</a></li> <li><a href="/forum/memberlist.php">Members</a></li> </ul> </div> </li> <li><a href="#">A link without a menu</a></li> </ul> </div> </div> </div> Code:
/* Wrapper */
#nav_wrapper {
clear: both;
}
/* Bar */
#nav_bar {
background: url('images/nav_swish_fade.jpg');
background-repeat: repeat-x;
height: 36px;
}
/* All the buttons within the bar, the middle portion */
#nav_content {
display: inline;
margin: 0 auto;
text-align: center;
background: #fff;
height: 36px;
}
/* Entire unordered list */
#nav_ul {
list-style: none;
position: relative;
}
/* Top level unordered list */
#nav_content ul>li {
display: block;
}
/* Top level unordered list links */
#nav_content ul>li a {
display: block;
float: left;
padding: 9px;
margin-left: 2px;
margin-right: 2px;
}
/* Menus */
.nav_subcontent {
display: none;
position: absolute;
background: #222;
margin-top: 8px;
}
/* Menu link */
#nav_content .nav_subcontent a {
display: block;
padding: 9px 20px 9px 0;
margin-left: -5px;
text-align: left;
min-width: 100px;
}
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
display: block;
}
Hello all, I've just recently began adventuring into the world of CSS and am in need of some help. I've created a horizontal nav menu that works perfectly fine in FF, Opera, etc. but refuses to listen in IE. The drop-down menu is positioned over to the right in IE, while in every other browser the menu is positioned (correctly) centered. I'd post a url but I'm just working offline on my computer so I don't have one to provide :\. I appreciate any advice you guys got for me. HTML (probably only the commented nav bar section is relevant) Code: <!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=utf-8" /> <title> Rutgers Libertarians | Home </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css" title="BasicStyle" media="screen"> @import "test.css"; </style> </head> <body> <div id="screen"> <div id="header"> <img src="header.jpg" width="1000" height="145" alt="banner" /> </div> <!--Navbar--> <ul id="navbar"> <li><a href="test.html">Home</a> </li> <li><a href="">Meetings</a> <ul> <li><a href="#meetings">Regular Meetings</a></li> <li><a href="#events">Events</a></li> <li><a href="#photo">Photos</a></li> </ul> </li> <li><a href="">Invisible Hand</a> <ul> <li><a href="#hand">Overview</a></li> <li><a href="#articles">Articles</a></li> </ul> </li> <li><a href="">About Us</a> <ul> <li><a href="#liber">Libertarianism</a></li> <li><a href="#board">Executive Board</a></li> <li><a href="#contact">Contact Us</a></li> </ul> </li> <li><a href="">Links</a> <ul> <li><a href="#main">NJ Party</a></li> <li><a href="#mutt">National Party</a></li> </ul> </li> </ul> <!--Sidebar--> <div id="leftbar"> <h3>News</h3> <ul id="leftlinks"> <li><a href="#news1">News 1</a></li> <li><a href="#news2">News 2</a></li> <li><a href="#news3">News 3</a></li> </ul> <h3>Site Map</h3> <ul id="rightlinks"> <li><a href="test.html">Home</a></li> <li><a href="test.html">Meetings</a></li> <li><a href="test.html">Invisible Hand</a></li> <li><a href="test.html">About Us</a></li> <li><a href="test.html">Links</a></li> </ul> </div> <!--Main Content--> <div id="main"> <div id="title"> <h1>Rutgers Libertarians</h1> <p>The Rutgers Libertarians are an organization dedicated to bringing the philosophy of liberty to Rutgers University. We welcome any who believe in any form of Libertarianism or just want to know what Libertarianism is.</p> </div> <div id="news"> <div class="news"> <h2><a name="news1">Libertarian Party Takes White House</a></h2> <img src="white.jpg" width="100" height="100" alt="white" /> <p>In an unprecedented turn of events the Libertarian Party stormed the gates of the white house Tuesday, placing Ron Paul as the head of government. Paul has promised an immediate withdrawal from Iraq, the dissolution of the Federal Reserve, and the holding accountable of failing banks.</p> <div class="comments"> <a href="">comments</a> </div> </div> <div class="news"> <h2><a name="news2">Pot of Brownies Event</a></h2> <img src="brownie.jpg" width="100" height="100" alt="brownie" /> <p>The Rutgers Libertarians held their annual Pot of Brownies event on Wednesday. There was a record 10,000 students in attendance and over 12,000 brownies were consumed - pot free. The message of decriminalizing drugs really seems to be catching on.</p> <div class="comments"> <a href="">comments</a> </div> </div> <div class="news"> <h2><a name="news3">Invisible Hand Remains Invisible</a></h2> <img src="invisible.jpg" width="100" height="100" alt="invisible" /> <p>The Rutgers Libertarian publication, <i>The Invisible Hand</i> has been delayed once again. Though the club president has reported recieving articles, no one seems to know why the newspaper never seems to come out.</p> <div class="comments"> <a href="">comments</a> </div> </div> </div> </div> <!--Main end--> </div> <!--Screen end--> </body> </html> CSS Code: /* CSS Formatting */
body {
text-align: center;
background: #153464;
}
#main {
background: url(bg.gif);
border: 1px black solid;
padding: 10px;
}
img {
border: 1px solid black;
}
h1 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;;
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
color: #ACACAC;
margin-bottom: 25px;
border-bottom: 1px solid #ACACAC;
}
h2 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
text-align: left;
color: #ACACAC;
border-bottom: dotted 1px #ACACAC;
margin-bottom: 0px;
}
h3 {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
color: white;
border-bottom: solid 1px white;
margin: 10px 0 0 3px;
}
p {
font-family: "Rockwell", "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 12px;
font-weight: 400;
color: white;
}
#title {
margin: 10px;
border: black solid 1px;
background: #30538D;
padding: 10px;
}
#news {
margin: 10px;
border: black solid 1px;
background: #30538D;
padding: 10px;
}
#screen {
/* top, right, bottom, left */
width: 1000px;
margin: 20px auto 0 auto;
}
#main {
width: 810px;
margin: 0 auto 70px auto;
float: right;
}
.news {
height: 150px;
}
.news p {
text-align: justify;
}
.news img {
float: left;
margin: 13px 15px 0 0;
border: 1px solid black;
}
#links a {
color: #EF8861;
border: 0;
padding: 10px 10px 0 0;
}
#links a:visited {
color: #EF8861;
}
#links a:hover {
color: #F8C473;
}
#leftbar {
display: block;
width: 150px;
border: 1px solid black;
float: left;
text-align: left;
background: url(bg3.jpg);
}
#leftbar p {
padding-left: 10px;
}
#leftbar a, #leftbar ul {
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
display: block;
width: 150px;
text-decoration: none;
color: black;
list-style: none;
text-align: center;
}
#leftbar ul {
position: relative;
left: -41px; /* ** Copy this for other problem areas ** */
}
#leftbar a:link, #leftbar a:visited {
background: white;
border: 1px solid black;
margin-bottom: 10px;
padding: 3px 0 3px 0px;
}
#leftbar a:focus, #leftbar a:hover, #leftbar a:active {
background: #30538D;
border: 1px solid black;
margin-bottom: 10px;
padding: 3px 0 3px 0;
}
.comments {
text-align: right;
}
.comments a:link, .comments a:visited {
position: relative;
top: 50px;
color: white;
padding: 3px 0 3px 0px;
text-decoration: none;
}
.comments a:focus, .comments a:hover, #leftbar a:active {
margin-bottom: 10px;
padding: 3px 0 3px 0;
text-decoration: underline;
}
/* Nav Bar */
#navbar, #navbar ul { /* Remove default list formatting; Inline replicates problem in IE */
padding: 0;
margin: 0;
list-style: none;
}
#navbar li { /* Make navbar appear horizontally */
float: left;
width: 175px;
padding: 10px 0 10px 25px;
color: white;
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
}
#navbar li ul { /* Hide second level when not hovered */
width: 175px;
position: absolute;
left: -999em;
}
#navbar li:hover ul{
left: auto;
background:url(bg3.jpg);
border: 1px solid black;
padding: 5px 0 5px 4px;
margin-top: 5px;
margin-left: -5px; /* -90 for IE */
}
#navbar a {
width: 175px;
display: block;
text-decoration: none;
color: white;
font-family: "Lucida Sans", "Lucida Grande", Verdana, Sans-serif;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 4px;
}
#navbar li ul li { /* Make list items smaller */
text-align: left;
}
#navbar li:hover ul li {
border: none;
padding: 4px;
}
#navbar a:hover {
text-decoration: underline;
}
#leftbar {
clear: both;
}
Thanks for your help! Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? what i want as horizontal fly out menu BUT I want the list of items to appear horizontally in a line below. These menus have the items appear vertically from a horizontal menu i looked at these and could find one http://www.cssdrive.com/index.php/menudesigns/category/C20/ |
|||||||