|
CSS - Help With Css ... Divs Jump To Next Line
Hi
I am having problems when using relative divs in CSS the items on the right keep jumping down to the next line. i have included an image of what it looks like, i wanted to make it so that the items on the right were aligned with those on the left. the left always stays fixed width but the right is dyamic depending on content. any suggestions? Cheers PS the code is as follows html, body{ margin:0; padding:0; } #topleft { position: relative; width: 180px; left: 12px; height: 23px; z-index: 1; vertical-align: middle; background-color: red; } #topright { position: relative; left: 192px; height: 23px; z-index: 2; vertical-align: middle; background-color: green; } #topleftwhite { width: 180px; position: relative; left: 12px; height: 23px; z-index: 3; vertical-align: middle; background-color: blue; } #toprightblue { position: relative; left: 192px; height: 23px; z-index: 4; vertical-align: middle; background-color: orange; } #leftmenu { position: relative; left: 12px; width: 180px; height: 23px; z-index: 5; vertical-align: middle; background-color: pink; } #rightcontent { position: relative; left: 192px; height: 23px; z-index: 6; vertical-align: middle; background-color: yellow; } #whitebottomleft { position: relative; width: 180px; left: 12px; height: 23px; z-index: 7; vertical-align: middle; background-color: gray; } #bluerightbottom { position: relative; left: 192px; height: 23px; z-index: 8; vertical-align: middle; background-color: black; } #blueleftbottom { position: relative; width: 180px; left: 12px; height: 23px; z-index: 9; vertical-align: middle; background-color: #FF33FF; } #whiterightbottom { position: relative; left: 192px; height: 23px; z-index: 10; vertical-align: middle; background-color: #996600; } HTML <div id="topleft">topleft</div> <div id="topright">middletop</div> <div id="topleftwhite">tleftcorner</div> <div id="toprightblue">bluetop</div> <div id="leftmenu">menu</div> <div id="rightcontent"> content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here content goes here </div> <div id="whitebottomleft">bleftcorner</div> <div id="bluerightbottom">bluebottom</div> <div id="blueleftbottom">bottomleft</div> <div id="whiterightbottom">middlebottom</div> Similar TutorialsHello, I'm trying to make a autostrech page with CSS. I'm having a problem where a DIV jumps down a line instead of compressing. Here is a link to the problem page: http://www.nexpost.net/community/te...rall_header.htm Try resizeing it in your browser. Has anyone had a similar problem? Any fixes? Thanks for any help. I can't get IE7 or IE6 to look corectly. IE8 and other browsers appear to be fine. Any suggestions? html: 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 id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_head">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HOME - My Company </title>
<link rel="stylesheet" type="text/css" href="/css/CC_Style.css" />
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="bannerHolder">
<img id="banner" src="../media/108/banner_home.jpg" alt="" />
<div id="banner2">
</div>
</div>
</div>
<div class="clearfix">
</div>
<div id="footer">
Copyright @ 2002-2010, My Company, Inc. <a href="#">PRIVACY STATEMENT</a>
| <a href="#">SITEMAP</a>
</div>
</div>
</body>
</html>
CSS Code: /*LAYOUT*/
*{
padding: 0px;
margin: 0px;
}
body
{
text-align: center;
background-image: url(../images/bg.gif);
background-repeat: repeat-x repeat-y;
}
#wrapper
{
margin: auto;
text-align: center;
width: 960px;
background-color: #FFF;
}
/*--------------- B A N N E R S --------------*/
#bannerHolder
{
padding: 0;
margin: 0;
border: 0;
text-align: left;
background-color: #fff;
height: 198px;
}
#banner
{
width: 655px;
height: 198px;
}
#banner2
{
float: right;
height: 198px;
background-color: #e5f2fb;
width: 304px;
}
/*--------------------- M A I N -----------------------*/
#main
{
background: #fff;
height: 300px;
}
#news /* News Bar for Banner DocTypes */
{
border-left: solid 1px #ccc;
float: right;
margin: 15px 0 15px 0;
padding: 0 15px 0 15px;
width: 274px;
height: 350px;
}
/*--------------------- F O O T E R -----------------------*/
#footer
{
height: 22px;
line-height:22px;
font-size: 10px;
color: #aaa;
border-top: solid 1px #ccc;
text-align: right;
padding-right: 15px;
}
#footer a
{
font-family: Arial, Helvetica, sans-serif;
color: #3a80a2;
}
/*----------------- F I X E S -----------------*/
.clearfix
{
clear: both;
}
Hi, http://www.expressible.net/index.php?cat=1 The problem I'm having is that on the page the 'Navigation' and 'Register' headings aren't in line. They are both styled so they are the same size though and I can't see anything which is stopping them from aligning. Also I've googled this but I still can't find the answer; are there any ways of making my titles and navigation look more appealing? Thanks a lot. Viewing in Firefox 3. This is how I created layout of my website: div.HEADER >div.logo >div.members >div.mainmenu div.CONTENT ........... After div.logo floats left, div.members floats right, and div.mainmenu just under. For some reason, there appears one empty line above div.main menu HEADER AREA: Code:
#header, #logo, #members, #mainmenu {
margin:auto;
text-align:left;
float:left;
}
#logo {
width:500px;
}
#members {
width:300px;
}
#members ul{
float:left;
list-style-type:none;
}
#members li a{
display:block;
font-weight:normal;
text-decoration:none;
}
#mainmenu {
width:800px;
text-align:center;
height:25px;
background:#6078BF;
border-bottom:1px solid #E6ECFF;
font-size:14px;
}
#mainmenu ul {
list-style:none;
}
#mainmenu ul li{
display: inline;
margin:0;
padding:0;
}
#mainmenu ul li a{
display:block;
float:left;
width:95px;
height:25px;
line-height:25px;
overflow:hidden;
color:#E6ECFF;
font-weight:bold;
text-decoration:none;
background:#6078BF url(images/mmenu_line.gif) right no-repeat;
}
#mainmenu ul li a:hover {
background:#809FFF right no-repeat;
}
Hi, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas? You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs: Problem: TinyURL dotcomslash a8qnky Working: TinyURL dotcomslash 8tj29l (The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.) I'm loading my FAQ list dynamically into a div. The data is being retreived asyncronously via javascript's xmlhttprequest object. Each Question has a jump target next to it. Is it possible to automatically jump to a certain tag within that responseText when loading all of that data? the following didn't work to automatically jump to a tag named "6" -----pathToAjaxScript?task=faq The jump works fine when not embedded like this. any suggestions? thanks Dan Hello, I have a free text search with auto suggestion that opens below the input box. I finally managed to make it look good in all browsers, but I have one problem left in IE - when the auto suggestion div opens with the options and I press the down arrow to move down the list, there is a little jump. You can see it by going to : bateries.websitebuildingsolutions.com in IE and enter "b1" in the search box, wait a second for the div to open and than press the down arrow to move down the list. What can I do to fix this? Thanks When i click on the Login at the loginform on www.ipan.be the form is jumping under the text, IE is good... Is there anyone who has this porblem or a solution? Hello I have a problem with the text while is loading before it is displayed the paragraph below and separators between the menu items are jumps. When the font/menu is loaded it is ok. Im using Google Font API, when i changed the font to Arial or Tahoma its working properly, only when i am using Google fonts i have problem. Thanks for any suggestion. Sorry for my English. Code: <head> <link href="styles.css" rel="stylesheet" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light,regular,bold&subset=latin' rel='stylesheet' type='text/css'> </head> <body> <div id="header"> <h1><a href="index.html"></a></h1> <ul> <li><a class="current" href="index.html" >Home</a></li> <li><a href="company_profile.html">Services</a><img src="images/separator.png" alt="" /></li> <li><a href="list_of_products.html" >Portfolio</a><img src="images/separator.png" alt="" /></li> <li><a href="gallery.html" >Contact</a><img src="images/separator.png" alt="" /></li> </ul> </div> </body> .... Code:
#header{
width:100%;
height:80px;
background:#fbb130 url(images/gradient.png) repeat-x;
margin-bottom:20px;
border-radius: 12px;
}
#header h1 a {
display: block;
background: url(images/mediacompass_logo.png) left no-repeat;
width: 287px;
height: 80px;
float: left;
margin:0px 10px 0px 30px;
}
#header a { font-family: 'Yanone Kaffeesatz', arial, serif;
font-weight:normal;
font-size:1.5em;
}
#header ul li{
float: left;
}
#header ul li a{
color:black;
display:block;
margin-top:30px;
margin-left:40px;
margin-right:40px;
}
#header ul li a:hover {
color:white;
}
#header ul li a.current
{
color:maroon;
}
#header img
{
margin-top:-55px;
}
Hey! I got some issues in IE8 (not checked IE7,6) When I press the "send" button and the form validates, the bottom 2 labels and a checkbox move down about 15px. I think it has to do with my positioning of the calendar icons above and the error messages, havent been able to fix it tho. http://www.borgweb.se/cvh/boka_rum.php is the address. The site is in swedish so bare with me, I think you will understand what I mean once you submit the form. If I then press ctrl-a or select everything with the mouse, the labels go back to their original position. Any ideas of what can sort this is welcome! Thanks! Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. When I switch between pages with images on them, everything is fine. When I switch between pages without images on them, everything is fine. But when I switch to or from a page with a picture on it to or from a page without a picture on it, the page jumps sideways a bit. Most ppl probably wouldn't even notice this, but I find it really annoying and want a good way to get rid of this. I'm using a centered fixed width css style so I have no idea how this could be happening. I'll just add the css if needed: (Any random advice or advice on how to make buttons without photoshop would be awesome too!) Code: body {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
td {
background: #FFFF96;
font-family: Verdana;
font-size: 14px;
}
a {
text-decoration: underline;
font-family: Verdana;
font-size: 14px;
}
a:link {
color:#2828FF;
}
a:visited {
color:#2828FF;
}
a:hover {
color:#AFAFFF;
}
a:active {
color:#AFAFFF;
}
img {
border: none;
}
#wrapper {
width: 950px;
margin-left: auto;
margin-right: auto;
}
#title {
width: 100%;
font-size: 27px;
font-style: italic;
background-image: url("images/bgwinterowl.gif")
}
#links {
width: 100%;
padding: 15px;
}
#body1 {
border: 4 double;
border-color: red;
background: #FFFFF0;
width: 100%;
text-align: left;
padding: 15px;
}
#body2 {
background: #FFFFF0;
text-align: left;
padding: 15px 15px 15px 100px;
width: 500px;
}
Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! The Example I've read a bunch about how div's won't stretch to accomidate div's inside of them if they overrun the height/min-height set for the container div. How do I get around this? You can see the skeleton of the site above. It's fine unless you resize the window smaller than the content. Alright, I've been working on my own custom border box for a while and I've almost got it, but it has a few problems still. How I do it is I have one div that contains it all (.box) that defines the height and width of the whole box. Then I have three boxRows to lay out the images, and then I define how three cells in each of those rows should behave, very much like how custom borders used to be done with tables. Here are the problems: In both firefox and internet explorer, the bottom row and the far right column actually appear OUTSIDE the .box containing box. There are two additional problems in internet explorer. First, the middle row handles the auto height differently and only expands about 10px instead of the height of the containing box. The second is that the whole middle row for some reason appears to be pushed to the right by about 16px. Any help would be appreciated. Here's the code: HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="reset.css" /> <link rel="stylesheet" type="text/css" href="testBox.css"> </head> <body> <div class="box"> <div class="boxRowTop"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowMiddle"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> <div class="boxRowBottom"> <div class="boxCellLeft"></div> <div class="boxCellMiddle"></div> <div class="boxCellRight"></div> </div> </body> </html> And here is the layout css file: Code: /* Box classes */
.box {
background: rgb(120,120,120);
height: 200px;
width: 500px;
}
.boxRowTop {
height: 16px;
position: relative;
width:%100;
}
.boxRowMiddle {
height: auto;
width:%100;
position: relative;
}
.boxRowBottom {
height: 16px;
width:%100;
position: relative;
}
.boxCellLeft {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 16px;
}
.boxCellMiddle {
height: 100%;
margin-left: 16px;
margin-right: 16px;
width: auto;
}
.boxCellRight {
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 16px;
}
/* Define Cell Backgrounds/Images */
.boxRowTop .boxCellLeft {
background: url(../LandingImages/topleft_circ_corner.png) no-repeat;
}
.boxRowTop .boxCellMiddle {
background: url(../LandingImages/top_border.png) repeat-x;
}
.boxRowTop .boxCellRight {
background: url(../LandingImages/topright_circ_corner.png) no-repeat;
}
.boxRowMiddle .boxCellLeft {
background: url(../LandingImages/left_border.png) repeat-y;
}
.boxRowMiddle .boxCellMiddle {
background: rgb(255,255,255);
}
.boxRowMiddle .boxCellRight {
background: url(../LandingImages/right_border.png) repeat-y;
}
.boxRowBottom .boxCellLeft {
background: url(../LandingImages/bottomleft_circ_corner.png) no-repeat;
}
.boxRowBottom .boxCellMiddle {
background: url(../LandingImages/bottom_border.png) repeat-x;
}
.boxRowBottom .boxCellRight {
background: url(../LandingImages/bottomright_circ_corner.png) no-repeat;
}
And last, the reset CSS, which I don't think has anything to do with the problems because if I take it out it still has them. Code: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, caption
{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
}
* {font-size:1em; font-family: inherit;}
:focus {outline:none;}
body { font-size: 62.5%; line-height:normal; font-family: Arial, Sans-Serif; color:Black; } /* 62.5% (10px), 75% (12px), 87.5% (14px), 100% (16px) */
p { margin: 0 0 1.2em 0; }
a { color:#ff0000; text-decoration:none; }
a:link { color:#ff0000; text-decoration:nonee; }
a:visited { color:#ff0000; text-decoration:none; }
a:active { color:#ff0000; text-decoration:none; }
a:hover { color:#ff0000; text-decoration:none; }
a.h1,a.h2,a.h3,a.h4,a.h5,a.h6,h1,h2,h3,h4,h5,h6
{
font-weight:bold;
display:block;
text-decoration:none;
color:Black;
}
h1, a.h1, a:link.h1, a:visited.h1, a:active.h1, a:hover.h1 { color:Black; text-decoration:none; font-size: 2.00em; }
h2, a.h2, a:link.h2, a:visited.h2, a:active.h2, a:hover.h2 { color:Black; text-decoration:none; font-size: 1.75em; } /* this is normally skipped? 1.50em */
h3, a.h3, a:link.h3, a:visited.h3, a:active.h3, a:hover.h3 { color:Black; text-decoration:none; font-size: 1.50em; } /* 1.25em */
h4, a.h4, a:link.h4, a:visited.h4, a:active.h4, a:hover.h4 { color:Black; text-decoration:none; font-size: 1.25em; } /* 1.00em */
h5, a.h5, a:link.h5, a:visited.h5, a:active.h5, a:hover.h5 { color:Black; text-decoration:none; font-size: 1.00em; } /* 0.75em */
h6, a.h6, a:link.h6, a:visited.h6, a:active.h6, a:hover.h6 { color:Black; text-decoration:none; font-size: 0.75em; } /* 0.66em WTF? */
fieldset { border:solid 1px; padding:0.25em 0.5em 0.75em; margin: 0 0 1.5em; }
legend { margin:0 0 0 2em; padding:0 1em; }
textarea, input, select { border:solid 1px #ccc; margin:0; padding:0; }
textarea, input { padding:0 .2em; }
input:focus,textarea:focus,select:focus { border:solid 1px black; }
small { font-size:.9em; }
ul, ol, dl { position: relative; padding:0 0 0 1.5em; margin:1.5em 0; }
dir, menu { margin:1.5em 0; }
/* nested lists have no top/bottom margins */
ul ul, ul ol, ul dir, ul menu, ul dl,
ol ul, ol ol, ol dir, ol menu, ol dl,
dl ul, dl ol, dl dir, dl menu, dl dl,
dir ul, dir ol, dir dir, dir menu, dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl
{
margin:0;
padding: 0 0 0 1.5em;
}
hr { margin:0.75em 0; padding:0; }
Any help would be GREATLY appreciated, as I've been working on this for a while! Thanks! This one is kicking my ***, if it were up to me i'd leave it as is, but it's not so here we go: http://www.beverley.com/kennettwip/ the two divs on the right will occasioanally "jump" a few pixels in to the left when reloading the page in IE7 (try it a few times) plus the 2px border on the right is sometimes 3px. It will not do it over the LAN which might mean it's a cache/fetch issue (bottom contents image of the buildings perhaps?!). But because i can't recreate it locally debugging it is a pain. Any help would be muchly appreciated but in the mean time i'm going to attempt to insert random empty divs and carriage returns to see what happens! |
|||||||