|
CSS - Want To Feel Available Space
Hey everyone,
I am creating Tabs in CSS. However these tabs are in 2 rows. I was wondering if anyone can give me an idea how do i make these tabs so that they feel all the available space. Is it even possible to do that? My tabs run in 2 rows and also its a combination of image and text. so calculating the width of the screen and dividing by number of tabs doesnt seem to work. Similar TutorialsHello gurus! I'm about to embark on my first css site and I'd like to make it a no reload type. I've been using frames but they are rather a nightmare. I've just learned how to use the <DIV> tag to separate my page into sections and position them with the style sheets. My problem is this (and please forgive my newbieness): If I have a nav section, a header, a footer, and a main content window, how do I make the info in the content window only change without reloading the whole page? Using frames, I could target the content window so the nav stays constant. Is there a way to do the same using css? Or do I now have to learn java? I've searched google and can't find the right answer. Would you be so kind as to point me in the right direction? Thanks for your help! Oxy I'm trying to create a (I think) simple page for an art gallery's artists. You can visit artizansc.com/dev/artists/artists.htm. I have created classes in my css for the artists' pictures (biopic), names (H2) and bio (biotext). I have also created a class called biowrapper to wrap each person's info. As you can see, the pictures are not lining up. It seems this should be simple and frankly, I'm feeling stupid. I'm new with CSS, but this shouldn't be rocket science! Can anyone please help me? Hi, Is any body know how to change look and feel as in following link of google translate. translate.google.com/translate_t Regards, Sjhonyblaze In the following code...why is there a space between the two div's?? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
#header { background-color: cadetblue; }
#footer { background: blue; }
</style>
</head>
<body>
<div id="header">
<p>This is my header.</p>
</div>
<div id="footer">
<p>This is my footer.</p>
</div>
</body>
</html>
If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there? I mean shouldn't the paragraphs be fully enclosed inside the div's? Such that no spacing should appear between the div's? Any insight anyone might care to share with me would be most appreciated. Thanks. Carlos I've been trying to get all the space out of IE, tried line-height and all of that, and nothing. Any hack to take out all of the space gaps so I can later on put some small margin? Thanks in advance Im trying to change the background color of my news posts for the main page. What I want is to have every second post a darker grey than the one before. In my css file I've added the following lines to accomplish this. Sectiontable1 and 2 beeing the different posts. Code: .sectiontableentry, .sectiontableentry0 { padding: 5px; } .sectiontableentry1 { border-bottom: 1px solid #ccc; padding: 5px; background-color: #ffffff; } .sectiontableentry2 { border-bottom: 1px solid #ccc; padding: 5px; background-color: #f6f6f6; } The php code look like this(see below) when inspecting it in the browser and I can cleary see that there is a blank space in between the class name and the number. But the problem is I have no clue how I can write that space in css. Cause if I just add a blank space in the css it thinks its another class or rather a standard tag like h1 and it doesnt work. Is there some way to write a space like that in css? Code: <span class=contentpane> <div class=sectiontableentry 1></div> <div class=sectiontableentry 2></div> <div class=sectiontableentry 1></div> /* see there is a space between sectiontableentry and 1*/ </span> Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. 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>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page: test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? Hey guys! My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set: .footer { background:#6CBDF0; clear: both; height:45px; padding-top:5px; } So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it? Thank you very much! PS. I've tried solving this for well over an hour now... Hi, I'm working on a site in Css and it all works fine in Firefox. But in IE7 there is a lot of extra white space between elements like after the h2 heads. Anyone know what i'm doing wrong? Here's the code. CSS Code:
body {
background: #1d1d1d url(../g/header_bg.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
font-family:arial;
font-size:11px;
line-height:1;
font-weight: normal;
text-decoration: none;
color:#575859;
text-align: left;
}
#container {
width: 992px;
margin: 0px auto;
text-align: left;
}
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
input, textarea{
font-family:Tahoma;
font-size:11px;
color:#000000;
vertical-align:middle;
font-weight:normal;
background:#FFFFFF;
text-align:left;
}
.formfield {
width:271px;
height:auto;
color:#000000;
background-color:#FFFFFF;
height:18px;
margin-right:8px;
border: solid 1px #404040;
}
#header {
height: 63px;
}
.menu {
float:left;
padding-top:25px;
}
.menu li {
background:url("../g/menu_sep.gif") right 3px no-repeat;
padding:0px 10px 0px 15px;
float:left;
}
.menu li a {
background:url("../g/menu_arrow.gif") 0 6px no-repeat;
color:#181818; font-weight:bold;
padding:0px 10px 0px 15px;
text-decoration:none;
}
.menu li a:hover {
text-decoration:underline;
}
.search {
float:right;
background:url("../g/search_bg.gif") 0 0 no-repeat;
width:357px;
height:43px;
padding:12px 0px 0px 10px;
margin-top:10px;
}
h1.logo {
width: 203px;
height: 109px;
background: url("../g/title.gif");
text-indent: -9999px;
margin-left: 10px;
}
#left_container {
float: left;
width: 200px;
background-color:#000000;
margin-right: 20px;
margin-left: 10px;
}
#middle_container {
float: left;
}
#right_container {
float: right;
}
.left_top {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_top_bg.gif");
}
.left_bottom {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_bottom_bg.gif");
}
#left_container h2 {
font-size:1.01em;
line-height:1.5;
color:#85B102;
font-weight:bold;
text-transform:uppercase;
padding:0px 0 10px 0;
margin-left:20px;
}
#left_container ul { margin-left:20px;}
#left_container li { font-size:1.01em; line-height:1.5em; color:#707070;}
#left_container li a { font-size:1.01em; line-height:1.5em; color:#707070; text-decoration:none; background:url("../g/arrow.gif") no-repeat 0px 6px; padding:0 0 0 19px;}
#left_container li a:hover { text-decoration:underline;}
HTML Code: <html>
<head>
<title>Test</title>
<link type="text/css" href="x/style.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="header">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>
</div>
<div class="search">
<form method="get" action="search.php">
<input type="text" class="formfield" value=""><input class="submit" type="image" src="g/search.gif" value="submit">
</form>
</div>
</div>
<h1 class="logo">MyTitle</h1>
<div id="left_container">
<div class="left_top"></div>
<h2>Menu</h2>
<ul>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Test2</a></li>
<li><a href="#" title="home">Test3</a></li>
<li><a href="#" title="home">Test4</a></li>
<li><a href="#" title="home">Test5</a></li>
<li><a href="#" title="home">Test6</a></li>
<li><a href="#" title="home">Test7</a></li>
</ul>
<div class="left_bottom"></div>
</div>
<div id="middle_container">
b
</div>
<div id="right_container">
c
</div>
</div>
</body>
</html>
Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please? Thanks so much! vonatah hey What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines. How can i make it so that the form wont require an extra line? http://www.thegi.net/tree/retail.htm I'm taking a Photoshop layout and turning it into HTML for a friend of mine. I just started the HTML process and am having issues right off the bat. NOTE: Pardon the semi-complete markup, I like to make small HTML documents locally to get the pieces to line up correctly and then I merge it with the final document template once it works. If you look at the above link in FireFox you will see everything lines up correctly, but in IE 7 (and maybe other browsers, I haven't gone that far yet) you will see gaps below the top set of divs and above the bottom set of divs. I have tried setting the margins and padding to 0 with no luck. Any ideas? Edit before posting: ACK! I solved it in IE by adding a DOCTYPE. Guess quirks mode made it render stupid. Is there anything I should be aware of here regarding this issue? Any pointers or gotchas I should look out for? I am a hell of a PHP developer, CSS is my weak point =) EDIT AGAIN! I am also going to move the styles into an external sheet once I get it working. Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs? Something like so: Code: <div id="one"></div> or <div class="two></div> <p></p> <p class ="three"></p> etc... In other words, would there be a obvious space where one of these styling markers was placed on the page? Hello, I have a table formatted by CSS within which there are two styles of text, headers and content. I have the content formatted using a class (conftabledetail), with the statement: .conftabledetail {font-size:10px;} I did that to make the content more compact and distinguishable from the headers. I would like to force a space between the paragraphs of content without using a <br> tag. I read that there is an "adjacent selector" which can be used to locate adjacent tags and apply a style, for example p + p {margin-top:1em;}, which would put a 1em space between adjacent paragraphs. Apparently this selector does not work when used against a subclass, because I can't get this statement to work: p + p.conftabledetail {margin-top:1em;} I CAN get this statement to work: p.conftabledetail {margin-top:1em;} But that's not what I want to do. Anyone have any ideas as to what I need to change or do differently? It would also be nice to do this with a <div> tag so I don't have to repeat the class identifier on every <p> tag... Thanks, Chris If you go to the following http://curley-construction.com/cc/ in IE6, you'll notice a break in the footer. I cannot for the life of me figure out why its being added in IE6, but not IE7 or FF.... I"ll post the HTML: Code: <!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>Small Business Credit Cards</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="layout.css" type="text/css" /> <!--[if lte IE 6]> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> </head> <body> <div id="pagewidth"> <div id="header"></div> <div id="wrapper" class="clearfix"> <div id="belowHeader"></div> <div id="maincol"> <div id="maincolInner">Main Content Column </div> </div> <div id="leftcol"> <div id="leftcolInner">Left Column</div> </div> </div> <div id="footer"> <div class="top"></div> <div class="content"></div> <div class="bottom"></div> </div> </div> </body> </html> ..and the CSS from layout.css Code: * { margin:0; padding:0; border:0;} html, body{ margin:0; padding:0; text-align:center; background: #E2EBF0 url(images/BG.jpg) repeat-x top; } #pagewidth{ width:1036px; text-align:left; margin-left:auto; margin-right:auto; } #wrapper{ background: url(images/pageBG.png) repeat-y; } #header{ position:relative; height:131px; background: url(images/header.png); width:100%; } #belowHeader{ background: url(images/headerBtm.jpg) left no-repeat; height: 36px; width: 297px; margin-left: 17px; } #leftcol{ width:166px; float:left; position:relative; padding-left: 17px; } #leftcolInner{ background-color: #000; } #maincol{ float: right; display:inline; position: relative; width:835px; padding-right:18px; } #maincolInner{ background-color: #555; } #footer{ clear:both; } #footer .top{ background:url(images/footerTop.png) no-repeat; width:1036px; height:13px; } #footer .content{ background:url(images/footerBG.png) repeat-y; padding:0; margin:0; width:1036px; /*padding: 20px;*/ } #footer .bottom{ width: 1036px; background:url(images/footerBtm.png) no-repeat; height:41px; } /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #leftcol{display:none;} #twocols, #maincol{width:100%; float:none;} }
Any clue on this? Thanks in advance! http://cirqueamongus.bdigia.com/main/ http://cirqueamongus.bdigia.com/x.css Page is valid XHTML1.1 and CSS. However, IE 6 causes a space to appear between my header div and my menu divs. Firefox and opera display the page just fine thanks for the help. Also, if you're using IE Mac, it might display funny there, as well. If you can give me information on what's happening there, I would also appreciate it. Hi everyone, I know this is probably an easy fix but I'm going cross-eyed trying to find the problem. Basically the top of the site has a nice space above the header with a horizontal row of links in IE however FF ignores the space and the links are pushed down on the header itself. I downloaded firebug for FF which is great and has saved me a ton of time the last few weeks but I'm just not seeing this. Thanks for any help http://karenwilliamson.com/joom5/ |
|||||||