|
CSS - Content Stuck On Left Side Of Ua
I'm working on a really simple theme. You can see the progress here.
this is a table-less theme. trouble that I'm having is that I cannot get the content to center. It is all floated left. Now, I'm intentionally floating the left column to the left, but that's the only thing (and changing that didn't fix the problem either). So I'm hoping one of you css gurus will have some suggestions. (link to style.css file) Thanks in Advance! Similar TutorialsHi. I just have a simple question. I would like to design a web page that has a menu bar at top, a left side bar, and probably a news wire type bar on the right. Something similar to the way the main Dev Shed page is set up. I'm not asking for anyone to explain to me how to do this, I just don't know what I need to look into to do this. Is CSS what I'm looking for? Or is it something else? I've just started to learn PHP and that's the language I'm programming in, so is there some useful way to do this in PHP? Also, any tips about news wires? Thanks in advance for pointing me in the right direction. Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 I also am having this problem with the menu in IE6 - the right hand side of the menu dropdown, "Videos", is also showing up on the left hand side, slightly cut off. I know it's "Videos" because when I hover over Videos, the text on the left hand side ("os") also lights up. Is it possible that -999em is not far enough over? What could be the problem/how can I fix this? A related problem, perhaps, is that the first below-menu item starts about 20px below where it should be. I'm new to CSS programming and I'm not too sure what's going on. image showing what the issue is at kburke dot org slash menuleft.jpg - I don't have enough posts to link an image. I really appreciate your help. The menu's in a 980px wide container. Some of the site's still in tables but I'm working on changing that. #nav, #nav ul { padding: 0; margin: 0; list-style: none; float:left; width:89.091em; list-style:none; line-height:1; background:#b6791e; font:11px Verdana, sans-serif; font-weight:bold; padding:0; margin:0 0 .5em 0; } #nav a { display: block; width: 11.1em; w\idth: 10.1em; color: #FFFFFF; text-decoration: none; padding: 0.75em 0.5em; } #nav a.daddy { } #nav li { float: left; padding: 0; width: 11.1em; position:relative; } #nav li ul { position: absolute; left: -999em; height:auto; width: 14.7em; w\idth: 14.5em; font-weight: bold; margin: 0; padding:0; background:#FFFFFF; color:#769841; border: 0.1em solid #769841; } #nav li ul a:hover{ color:#ffff30; background:#769841; } #nav li ul li a{ color:#769841; } #nav li li { padding-right: 1em; width: 14.5em; w\idth:13.5em; } #nav li:hover ul { left: auto; } #nav li a:hover, nav li.sfhover a:hover{ color:#FFFF30; } #nav li ul li a:hover { color:#FFFF30; } #nav li:hover ul, #nav li.sfhover ul { left: auto; clear:both; } #nav li ul ul { margin: -3.3em 0 0 5em; } #nav li:hover, #nav li.sfhover { background: #769841; } #nav li a:hover, #nav li.sfhover a:hover{ color: #ffff30; } #nav li ul a{ color:#769841; padding:.4em; } http://www.ilumos.co.uk/site/ http://www.ilumos.co.uk/site/style/styleDefault.css As you can see on the left there is a "glowing" blue-white fadey thing going on on the left of the page, but it stops after the header (#header) for no apparent reason. The page renders fine in IE, but in Firefox or any other standards obeying browser it stops there. the CSS for the page border on the left is as follows: #wrap { background: url("../images/ilumosPageFadeLeft.jpg") repeat-y; padding-left: 25px; width: 750px; } (the wrap div contains all of the page's content) How can I make the image extend to the bottom of the page? Thanks I have been trying to write a horizontal CSS nav menu for my website thinkmarriage.org/catalog/ based on some code I found. The menu seems to work great, except: 1. it is adding what looks like 30ish pixels of padding on the left side of the menu. I have tested in FF, IE, and Safari, all do the same thing. The code is CSS 2.1 validated. The link to my sample is: thinkmarriage.org/menu2.html 2. When I add the menu into my actual store, in FF it works, but IE turns the horizontal nav into vertical drop boxes. I was pretty sure the style sheets were conflicting with one another, but now the bar is working in FF, and I can't seem to find any problems. The two style sheets are : #1 (for the menu) : thinkmarriage.org/catalog/menustyle.css and #2 (for the site) : thinkmarriage.org/catalog/stylesheet.css The link to the site is above. If anyone has any thoughts as to where the extra padding is coming from or the conflict with the sheets in IE, I would greatly appreciate it. (Sorry, the rules won't permit me to place hyperlinks) Hi, I'm racking my brain here and I can't figure out what I'm doing wrong. First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content. http://65.175.116.253/design/demo.html I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link http://65.175.116.253/design/design.rar I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong. Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out.. Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
width: 100%;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: left;
width: 17em;
margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
------------------------------------------------------- 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">
<title>www.company.com/</title>
<link href="css.css" type="text/css" rel="stylesheet" media="screen">
<!--[if IE]>
<style type="text/css">
#today{
text-align: right;
margin-top: 0;
margin-bottom: 0;
padding: 0 2em 0 0;
position: relative;
top: -1.66em;
color: #fff;
font-weight: bold;
line-height: 1;
}
</style>
<![endif]-->
</head>
<body>
<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
<div id="header">
<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
<ul id="navbar">
<li class="first">
<a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li><a href="http://www.company.com">nav link</a></li>
<li class="last"><a href="http://www.company.com">nav link</a></li>
</ul>
<p id="today">date here</p>
</div> <!-- end div id header -->
<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>
<h2>quick search</h2>
<table class="mainsearch">
<tr>
<td>
<FORM action="http://company.com/" method="post">
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
</td>
<td width="285" valign="top">
<br>
<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>
</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
</div> <!-- end div id content -->
<div id="sidebar">
<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p> This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is.
<br>
</p>
</div> <!-- end div id whatistea -->
<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->
<div id="footer">
<p>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
- <a href="http://company.com">nav link</a>
-
</p>
</div> <!-- end div id footer -->
</body>
</html>
Hi there, I have 2 main divs.. one left for navigation and one to the right for the content. For some reason, the right hand side one is displaying content at the bottom where the left div's content ends, instead of at the top. This is my code. Any help on what I have done wrong would be great! PHP Code: #main_left{ width: 238px; float:left; background-color: #EBE1D1;} #main_left_inside{ padding: 10px;} #main_content{ margin-left: 248px; background-color: #ffffff;} #main_content_inside{ padding: 10px;} This may be a stupid question, but is there an easy way to make a div have an image on the left and content on the right... BUT then also make sure that, if the image's height is larger than the div, the div still covers the bottom. I know you can use a "float killer" div, however if I want a float killer on EVERY div class of this type, is there some easy way to tell the css to ALWAYS include code at the bottom? Also what method would a good coder use to vertically align the content on the right so that there isn't a lot of empty space? Thanks I'm having a few problems with my CSS design which I can't seem to solve right now, despite lots of searching and code editing. I'm trying to do a simple design with two columns - a left menu and the main content on the right. It should be a simple page I think. It's probably easier to see an example of the page I'm talking about: http://edwin.netbits.co.uk/devshed/...blem/index.html In Firefox, it looks fine. But in IE 6 the line "Some text" is slightly more to the right than the line "and some more text". If you select the text on the right, it's slightly more obvious (see screenshot). It seems that the menu on the left is somehow shifting the text over. I have looked at tutorials (such as this one), but the test page I put together has the same problem. I think this is probably a simple problem, but I can't work out what's wrong. The HTML and CSS code is shown below. HTML: Code: <div id="contentscontainer">
<div id="left">
Menu
</div>
<div id="contents">
Some text<br /><br />and some more text
</div>
</div>
CSS: Code: div#contentscontainer
{
padding: 0px;
margin: 0px;
}
div#left
{
float: left;
width: 50px;
padding: 0px;
margin: 0px;
}
div#contents
{
padding: 0px;
margin-left: 170px;
}
Thanks, Edwin hi, i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7. However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo. I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8. Does anyone know whats causing this issue? Here is my code below. Thanks in advance. First, the HTML code:- 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=iso-8859-1' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='stylesheet' type='text/css' href='css/default.css' />
</head>
<body>
<div id='page'>
<div id='logo'>
<img src='gfx/siteLogo.jpg' alt='Our Website Logo' />
</div>
</div>
</body>
</html>
Now the css file:- Code:
/* page structure definitions */
html
{
font-size: 100%;
}
body
{
margin: 0;
padding: 0;
/* 20px */
padding-top: 1.25em;
padding-bottom: 1.25em;
text-align: center;
font-family: Verdana, sans-serif;
background-color: white;
/* 16px */
font-size: 1em;
}
#page
{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* 900px */
width: 56.25em;
/* 1px */
border: solid black 0.0625em;
background-color: #ABBAD9;
}
#logo
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
#logo img
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
The image in the logo is 900px * 150px. I'm trying to use CSS to create a layout that has a top header, followed by a left side navbar, a center content area, and a bottom footer. I'm totally lost by the CSS needed to make this happen. Here's what I'm trying. It's borrowed from other posts that came up by searching for headers and footer. Any help would be fantastic. I'm trying to end my use of frames for the header and navbar. Thanks in advance for any help. Code:
#header {
left: 0;
width: 100%;
height:125px;
top: 0;
background-image: url(images/topbackground2.jpg);
background-repeat: repeat;
}
#navbar{
width:122px;
height:100%;
background-color:#3f79a1;
position: absolute;
top: 125px;
left: 0px;}
#footer{
background-image: url(images/gradientsmaller2.gif);
font: 10pt;
position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;
padding: 0 15%;
}
Hello, My first CSS site was going fine; I was learning as I went and drawing from different resources. My code and CSS probably isn't very pretty ( I validated it, I know it needs to be cleaned up) but things were working. Then I went back and made some adjustments concerning the widths of my column divs. Now I find that Firefox is respecting the rightcolumn div (specifically: <div id="contentright">)but IE keeps kicking it to the bottom left. I've tried messing with the column lengths so everything fits accordingly as specified in the frame div width. Can anyone please take a look and offer a suggestion? thanks. http://www.brinjac.com/test/binnspark.html Hi, I have a site with a left navigation bar (which is fixed width, and has a background colour that must stretch full screen from top to bottom of the page). The site is: http://67.18.220.222/~duoboots/2005/z.html Stylesheet: http://67.18.220.222/~duoboots/2005...s/style2005.css As you can see, the left navigation menu stops once the content within the div is displayed. It does not stretch to the bottom of the screen. (say if you're on 1024 x 768 resolution) Note: this varies according to the main (right) content. If the main content was shorter than the menu bar - it would work fine. The menu bar has a min-height of 100% which means the background applies to the size of your screen. However, if the main content height is greater than that of the menu bar - then the menu bar will not adapt, but the background simply stops. Is there a workaround for this? With tables, this could easily be achieved because the background colour of one cell is stretch until the end of the table, and not the content within the cell. However, I'd like to do this with CSS. Here's some CSS: Code:
body, p {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:7.5pt ;
font-weight:normal;
}
body {
height:100%;
margin: 0px;
background-color: #2F201E;
}
#container {
width: 968px;
height:100%;
}
#nav {
width: 201px;
border-right: 3px solid #FFFFFF;
background: #8D603B;
float: left;
min-height:100%;
}
I've tried switching "min-height" and "height" but they don't seem to do what I want.... if anyone could help me out it would be MUCH appreciated! Thanks a lot! Thanks for taking time to read my question. How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture) eg: ______ |1|2|3| |_|_|_| instead of ________ |1||2||3| |_||_||_| Thanks, Brad Hi, I'm having a slight problem with my css. I want to display a comment with a number of images to the right of it. e.g "Excellent" plus 5 stars next to it (note: images of stars) so i tried this: Code: <div id = "commentText"> Excellent </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "commentText"> Fantastic </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> <div id = "star"> </div> css Code:
#commentText
{
font-size: 100%;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
padding-left: 30px;
}
#star
{
display: inline;
height: 24px;
background-image: url(images/star.png);
background-repeat: no-repeat;
padding-left: 20px;
}
I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason. Any help is appreciated to help me get the desired effect. Thanks! ok at Rodoslovlje I have an issue. The menu on the left is most of the times longer then the right content part. Is there a way to fix that when this occurs I can make the right part move along without editing every page and hitting enter 20 times? Thnx Hi! I want to have let's say 4 divs of width:25% horizontally side-by-side. Ex: (I'll ry to draw it ) | | | | | | | | | | | | | | | Thank you. Hi. I'm a design student working on a website for my boss, and I've come across a problem and was wondering if someone could help me out. It might be a simple fix, but I can't seem to figure it out. I have a body wrapper div (subtitle, body text, etc) on the left that's approx. 705 px wide and a vertical navigation bar div on the right that's about 240 px wide. I've tried floating the body wrapper left and the navigation buttons right, but one always ends up sitting below the end of the other. When I use the "clear right" or "clear left" commands, it doesn't help. Any ideas what I could do to get them to line up on the top? I want them to sit next to one another. Thank you very much for any ideas! Britta Hi. I've a div container with a gray bg color then inside I've two DIV (left & right). It works on IE but on firefox the bg color the the two DIV is white and if I add bg color=GRAY for the 2 DIV the middle is white. And I don't want to put bg color on the class = left and right because if I want to reuse these with other stuff then the color won't match to other things. How can I fix this problem? Please take a look at the following link with IE & firefox and u know what I mean. Please take a look at source code or in here. Thank you!!! http://yourbestproduct.com/test.html CSS CODE: body { text-align: center; } #container { width: 800px; margin: 0 auto; } #sub_title { background-color: #E6E6E6; background-repeat: repeat; padding: 2px; width: 796px; color: #848484; } .left { float : left; margin-left: 10px; } .right { float : right; margin-right: 10px; } HTML CODE: <div id="container"> <div id="sub_title"> <div class="left">Left Message</div> <div class="right">Right Message</div> </div> </div> |
|||||||