|
CSS - Basic Css Problem, Can Someone Help Please?
Hi, I'm so glad I found this forum, i have a feeling I'll be here often, lol. I fumble my way through css and get by but I have a really annoying problem with a centre content box on the homepage of my forum, when the browser window is re sized smaller the content box gets moved down the page leaving a big gap in the middle. I have managed to absolute position the box itself but the picture and text that is in it still moves and overlaps the contents box on the right.
Sorry to be so long winded, I'm sure there's an easy coding solution but I can't find it Thanks for reading Similar TutorialsBasic positioning problem... Suppose I want to stack two (or more) elements on top of eachother, sort of a column. I want a masthead (images), and boxes of text below it. So I tried this: Quote: <html> <head> <title>No Jail Test Page</title> <style type="text/css" media="screen"> div.box_one { width: 100%; background: url(./Image_Back.gif); } div.image_left { float: left; } div.image_right { float: right; } div.box_two { background-color: #F4F4F4; width: 100%; border: 2px solid #006633; border-collapse: collapse; padding: 10px 10px 10px 10px; } </style> </head> <body> <div class="box_one"> <div class="image_left"><img src="images1.gif"></div> <div class="image_right"><img src="images2.gif"></div> </div> <div class="box_two"> Some Text Some Text </div> </body> </html> But the images end up over the text, so obviously I don't understand the positioning. SEE ATTACHED IMAGE Can someone point out my positioning problem here and recomend a tutorial? [EDIT] This actually looks almost perfict in IE, it's in FF that things "stack up" on eachother... Hi, I have three <div> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div id="container" style="width:500px;height:700px;background-color:green;">
<div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div>
<div id="three" style="float:right;width:100px;background-color:red;">three </div>
<div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
</div>
</BODY>
</HTML>
I noticed when I increased the % width of my <div two> it goes below my <div three> I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior? Hi, suppose I have a class declared in a css file Code:
.myname {.......}
that css file I include in my page. Now if I want to over write that class in my page I do somwething like following in my page Code:
<style>
.myname {different stuff}
</style>
is it ok to do something like this, or delcaring class twice may cause problem? Hi Everyone, I am quite new to CSS, and I am working on my University Final Year Project. I currently have just 4 errors, when I validate my page: URL My CSS page can be found he URL Can anyone please tell me you I get these errors, the code looks correct to me. Also, do you know any Frontpage/Dreamweaver type programs, which u can directly edit text etc, while keeping to the W3 Standards. Regards Alex Hi all! New to the forum, hopefully somebody will be able to help me out with a problem I am having! I am currently working on a simple flat website and would like help with the layout. I know what I want, however I cant seem to get the code working I will upload a picture outlining what I want to achieve, it would be pretty confusing to explain. URL Basicaly, heres the idea. Header Main Content Container Footer The footer must always be visible and stick to the bottom of the page. When displayed in higher screen resolutions, the footer is still at the bottom. That is within my ability, but I am having trouble formatting the Main Content Container. I want it to be a static height, regardless of screen size. However, if it is viewed in a lower screen resolution, the footer is going to eat into this height so I would like to get a vertical scroll bar to appear inside the Main Content Container div to accomodate for this. I have trouble explaining what I mean please if you have the know how can you help me out? I'd really apreciate it! Thanks in advance, hopefully I will be able to contribute to the forum in the future Hi: I'm new to HTML so you would imagine what was my dilemma when I was asked to use CSS on my forms. Can someone add the CSS code to the following code along with some tips on how to make it more pleasing? If you look at it now its dull, dull, dull. <FORM METHOD="POST" ACTION="login.php"> <TABLE border="7" CELLPADDING="3" CELLSPACING="10" BORDERCOLOR=BLACK> <tr><th colspan=2><FONT size="5"><B><center>MAIN LOGIN FORM</B></FONT></th></tr> <TR><TD><B>USERNAME:</B></TD><TD><input type="Text" name="username"></TD></TR> <TR><TD><B>PASSWORD:</B></TD><TD><input type="password" name="secret"></TD><TD> <input type="submit" name="submit" value="LOGIN"></TD><TR> </form> </TABLE> Also thanks in advance. heya guys having some drama with what should be a simple task. basically i just want to expand the intro-left div to 100% without pushing the right hand content thats fixed. Code: <div id="intro" style="float:left; display:inline; border: 1px solid red; width:100%;"> <div id="intro-left" style='float:left; border:1px solid green; overflow:hidden; width:auto;'> text </div> <div id="feeder" style="float:right; border: 1px solid black; width:200px;height:400px;"> text </div> </div> Hi There, I am having a problem with getting padding to work correctly. I am trying to create a simple tabular view and the padding on my text content does not seem to be acting as I want it. In the main text content area I want a padding of .3em all the way around. It looks like the left and right padding is correct in both FF and IE. But in IE7, both the top and bottom padding appear to be more than the .3em. In FF their is no top padding and the bottom padding seems more than what I am looking for. I am including a sample which illustrates my problem. Thank you for any help on what I am doing wrong here. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.revsummary
{
width: 100%;
border: #036 solid 1px ;
margin: .5em 0 .5em 0;
}
.revsummary span
{
background-color: #eee;
border-bottom: #036 solid 1px ;
float: left;
text-align: center;
padding: .3em 0 .3em 0;
}
span.revsumtitle
{
width: 90%;
background-color: peachPuff;
text-align: left;
padding-left: .3em;
}
span.revsumrating
{
width: 10%;
margin-left: -6px;
border-left: #036 solid 1px ;
background-color: peachPuff;
}
span.revsumdest
{
width: 35%;
}
span.revsumcl
{
width: 35%;
margin-left: -2px;
border-right: #036 solid 1px ;
border-left: #036 solid 1px ;
}
span.revsumship
{
width: 30%;
}
span.revsumwrtup p
{
padding: .3em;
text-align: left;
}
span.revsumwrtup
{
background: none;
border-bottom: none;
float: none;
}
#crContentview
{
padding: .5em;
}
</style>
</head>
<body>
<div style="width: 600px;">
<div id="crContentview">
<div class="revsummary">
<span class="revsumtitle">Some title line</span>
<span class="revsumrating">AA</span>
<span class="revsumdest">Label 1</span>
<span class="revsumcl">Label 2</span>
<span class="revsumship">Label 3</span>
<span class="clear"></span>
<span class="revsumwrtup"><p>Here is a bunch of text, I want this text to have a padding around it and it seems to work fine on the left, right and bottom, but not the top. I have a feeling this is something to do with the way I am using the spans and floats.</p></span>
</div>
</div>
</div>
</body>
</html>
I have a CSS call for all p, like this p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; } now I want headings to be ital, so I add p.ital { font-style: italic; } and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold p.italBold { font-weight: bold; } That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this? Thanks for your help CJB I am new to this stuff started php about a month ago now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page also in FF the nav menu is fine just not in the right location in IE the bottom half of the nav menu sticks out one inch past the top half here is my css PHP Code: #divNav { background: transparent url(../images/bk-nav.jpg) no-repeat top left; margin: 0; padding: 0; height: 80px; width: 800px; } #nav { position: relative; top: 55px; height: 80px; width: 800px; } #nav li ul, #nav li ul { margin: 0; padding: 0; } #nav a { text-decoration: none; } #nav li { /*float the main list items*/ margin: 0; float: left; display: block; padding-right: 15px; } #nav li ul { display: none; } #nav li.off ul, #nav li.on ul { /*put the subnav below*/ position: absolute; top: 25px; left: 0; padding-top: 15px; background: #224d6f; height: 28px; width: 740px; padding-left: 60px; } #nav li.on ul { background: #f90; } #nav li.on:hover ul, #nav li.over ul { /*for ie*/ background: #224d6f; } #nav li a { color: #224d6f; font-weight: bold; display: block; width: 93px; padding: 0; } #nav li.on a { color: #f90; } #nav li.on ul a, #nav li.off ul a { border: 0; float: left; /*ie doesn't inherit the float*/ color: #f90; width: auto; margin-right: 15px; } #nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/ background: #224d6f; } #nav li.on ul { display: block; } #nav li.off:hover ul, #nav li.over ul { display: block; z-index: 6000; } #nav li.off a:hover, #nav li.on a:hover { color: #f90; } /*do the image replacement*/ #nav li span { position: absolute; left: -9384px; } #liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a { display: block; position: relative; height: 26px; background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/ } /*first, put the initial states in place*/ #liRenaissance a { background-position: 0 0; } #liArtNouveau a { background-position: -102px 0; } #liModern a { background-position: -204px 0; } #liPostModern a { background-position: -306px 0; } #liDigital a { background-position: -408px 0; } /*active area - for this demo - the code could be based on a body class, and probably work better.*/ #liModern.on a { background-position: -204px -37px; } /*add selectors for the other li's and background-positions*/ /*hover states*/ #liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a { background-position: 0 -73px; } #liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a { background-position: -102px -73px; } #liModern a:hover, #liModern:hover a, #liModern.over a { background-position: -204px -73px; } #liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a { background-position: -306px -73px; } #liDigital a:hover, #liDigital:hover a, #liDigital.over a { background-position: -408px -73px; } /*subnav formatting*/ #nav li.off ul a, #nav li.on ul a { display: block; background: #224d6f; color: #fff; font-family: arial, verdana, sans-serif; font-size: small; } #nav li.on ul a { background: #f90; } Hey all, I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work. So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds. What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has. I just can't get it to work. Can anyone help me? Thanks a lot. Regards. Hi guys, just dropping a line because I am having the darndest time trying to get this page: http://www.againsttheline.com/college_football_links/ to look the way I want it to with the CSS the script developer included. I have never personally used CSS myself, so I'm at a bit of a loss, but I have gone into the CSS file, changed what I though to be correct, but can never get the right results. I would like the categories in the middle of the page to be larger without changing the size of the rest of the links on the page. However, when I change "CatHeaderText" size it has no effect. If I change body text size it has no effect. The only thing that works when I change the font size is the a:link thing from xx-small but then that changes every link on the page and not just the category links in the middle. Can anyone offer any ideas of how I can make this work? Thanks, John Below is the full CSS <style> .bodytext { font-family: verdana,arial,ms sans serif; font-size: 10pt; color: #000000; } a:link, a:visited, a:active { font-family: verdana,arial,ms sans serif; font-size: xx-small; color: #70191B; text-decoration: none; } a:hover { font-family: verdana,arial,ms sans serif; text-decoration: underline; color: #800000; } .dotted { border: 1px dotted #000000; } .catheadertext { font-family: verdana,arial,ms sans serif; font-size: l2pt; font-weight: bold; color: #000000; } .button { font-family: verdana,arial,ms sans serif; font-size: xx-small; border-color: #909090; background-color: #404040; color: #FFFFFF; } .formtext { font-family: verdana,arial,ms sans serif; font-size: xx-small; } .poplisttext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 7pt; } .revheadertext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; font-weight: bold; color: #FFFFFF; background-color: #5A636E; } .topborder { border-top: 1px solid #000000; font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; color: #000000; } .bottomborder { border-bottom: 1px solid #000000; font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; color: #000000; } .description { font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; color: #000000; padding-left:20px; } .adminheadertext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 8pt; font-weight: bold; color: #000000; } .admintable { background-color: #000000; } .adminmain { background-color: #FFFFFF; } .subcatheadertext { font-family: tahoma,verdana,arial,ms sans serif; font-size: 9pt; color: #800000; } </style> I'm new to CSS and I am trying to create a style sheet for a website I am currently getting ready to begin production of and was trying to get my basic layout made up. I was wandering if you guys could help me out because I keep getting a few concepts mixed up as I am going along through creating this and can't quite get it set up the way I want to. I tried to comment my CSS so you guys could get a basic understanding of what I was aiming for. Don't worry about the odd backgrounds at the moment b/c I am just using them to easily identify my different divs. Anyway, here is my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1014px; /* 1024px total with padding */
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
padding-right: 10px;
}
#accounttypeselector { /* select personal or business to affect page display */
position: absolute;
width: 100%;
height: 25px;
left: 0;
top: 0;
padding: 0;
background: #ff00ff;
}
#servicesbar { /* container for user services */
position: absolute; /* sitting up this way b/c will be contained within wrapper */
width: 100%; /* with absolute positoning and being inside wrapper should be 100% of width of wrapper */
height: 30px; /* 30px should be adequate height */
padding: 0;
background: #ffffff;
}
#servicesbar-services { /* container for user services once logged in */
position: absolute; /* not sure if position for this is right - should be left side of servicesbar */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
padding: 0;
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
position: absolute; /* not sure if position for this is right - should be right side of servicesbar */
width: 25%; /* want it to be 25% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
}
#header { /* will include site banner/logo */
width: 1024px;
padding: 0;
background: #ff0000;
background-image: "background.gif"; /* if I don't specify a height will this div take on the height of the image? */
}
#navmain { /* navbar that will be located below header */
width: 1024px;
padding: 0;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
padding: 0;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 70%;
background: #66CDAA;
padding:0;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 15%;
background: #8A2BE2;
padding:0;
}
#footer { /* footer to be located at bottom of wrapper */
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
And here is just my bareboned html where I was trying to put my divs together: Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > </div> <div id= "servicesbar" > <div id= "servicesbar-services" > </div> <div id= "servicesbar-login" > </div> </div> <div id= "header" > </div> <div id= "navmain" > </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > </div> <div id= "bodywrapper-main" > </div> <div id= "bodywrapper-news" > </div> </div> </div> <div id= "footer" > </div> </body> </html> Can anyone offer me some suggestions to straighten me out here and also any tips if I am doing anything that isn't the accepted norm. Thanks in advance and let me know if you have any questions as to what I am trying to do. Really appreciate it. Nathan how do you set the width with CSS? i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks. Hello folks, I am trying to get a basic sprite working. I have been reading on this for over a week and I think I am missing something very basic. I made a couple sprite png's in photo shop could not get them to display correctly and I found a place online that makes them for U, it displays just like the ones I made... so http://www.realestateozarks.com/mcnally/mcn.png Ok what is happening when I try and call the sprite and display a pic on it, it does correct width and height but divides the height by the 6 pictures on it and displays all of them instead of 1. http://www.realestateozarks.com/rsstest.htm and U can see what I am trying to say. I am not trying to do anything fancy here only display 1 pic out of the 6 correctly. if I call the sprite in a image statement like <img class="sprite mcn1 mc5"> it does display the img correctly... but that is not correct html code and if alt statment is added it displays it on top of pic. css code passes w3c.org test NOTE: if I try and display a individual pic in a td statment like <td class="sprite mcn1 mc5"> it displays the picture correctly... well as a backround image anyway... here is my html code to call sprite... In head statment Code: <link href="mcsprite.css" rel="stylesheet" type="text/css" > in body to call pic Code: <img src="../mcnally/mcn.png" class="sprite mcn1 mc5"> Here is code in my mcsprite.css file Code: .sprite {background:url(../mcnally/mcn.png);
background-repeat:no-repeat; }
.mcn1 {height:125px;}
/* mcn1 */
.mc1 {width:200px; background-position: 0px 0px;}
.mc2 {width:200px; background-position: 0px -135px;}
.mc3 {width:200px; background-position: 0px -270px;}
.mc4 {width:200px; background-position: 0px -405px;}
.mc5 {width:200px; background-position: 0px -540px;}
.mc6 {width:200px; background-position: 0px -675px;}
If I can get it to display 1 pic correctly then I can change my code and display all 6 pics correctly. I have 24 pic's on my home page so using a couple sprites with 6 pic's each on them with .2 sec latency on grabbing each individual pic will save me about 2 sec load time on my home page. thanks in advance for any suggestions/help whonoes I am trying to figure out the best way to right justify an element in relation to other elements within a div. Here is an example: <head> <title>right position</title> <style type="text/css"> #maindiv {width: 600px; background: #cccccc; padding: 10px; border: solid 1px black;} .left {font-size: 2em;} .right {padding-left: 350px} </style> </head> <body> <div id="maindiv"> <span class="left">hello world</span> <span class="right">hi there</span> </div> </body> This can't be the best way to right position something, can it? The only alternatives I can think of are absolute positioning or possibly floating, which seems unnecessarily complicated for something so simple. Can anyone suggest a better way of doing this? Ideally, the element would stay pinned to the right even if the left element changes widths. Thanks in advance, CSS Newbie! Hi, Not sure if this topic is ok if someone can nail this down here, but I have a question. How good or bad is it to set all the value to zero? Like Code: blockquote, body, dd, div, dt, fieldset, form, h1, h2, h3, h4, h5, input, li, ol, p, pre, textarea, th, td, ul{
margin:0 0 0 0;
padding:0 0 0 0; }
in front of the rest of styles. What about the other tag's, how to zero them out? Or should I enter the CSS default value's? CSS 2 and CSS 2.1 are different with some default value's. How good is this for all browsers in this universe? First I want to call it resetting them to defaults, but thats not the right word I think. Each browser has his own start ( default ) values. And setting them to a defined startvalue is not really resetting, but thats just word nickpicking. Also what's more save Code: margin:0 0 0 0; padding:0 0 0 0; or Code: margin:0; padding:0; is it 100% sure that the latter one overrides all the margin-lefts:10px ( thinking about cascading )? Some comments? Hey guys, I am brand new to these forums, this seems like a good place to ask for help. So I am a novice web designer, I use AdobE Dreamweaver CS3. I have designed and coded some websites quite successfully, but now I keep running to the same problem. I have made my layout and turned it into different divs on Dreamweaver. This is in a very basic early stage. Next I want to add content, and I know how to do that, but every time I have done that and I add more content downward outside of the original "content" div's borders, the whole layout sometimes gets screwed up. Here is the address to the basic website that only looks to be alright: vivanidesign.com/newvivani/design.html. Then as I add content, to this particular page, it overflows, as shown in this website: vivanidesign.com/newvivani/designfail.html. How can I fix this? How can I make the background content image follow the text, so it will move down with it? Not just the content div, but the sidebar div also. Any help would be really great, I've tried to find out the answer to this for a while! Thanks! I have this: all my css files in one subdomain, html.website.com all my iamges in another subdomain, images.website.com i link my stylesheet: <link href="http://html.website.com/html/style.css" rel="stylesheet" type="text/css" /> and in the CSS: background:#333 url("../images/bodybg.png") repeat-x fixed top center; does not work. i have to put the whole domain in there? as far as relative paths, since the image is relative from the path of the location of the stylesheet? so I would think ../images/ should work? |
|||||||