|
CSS - Problems With Divs (select Text)
Similar TutorialsHi there! I'm using this code: CSS: Code:
#content {
margin-top: 75px;
width: 597px;
height: auto;
}
#left {
width: 110px;
height: 497px;
margin: 0px;
padding: 0px;
float: left;
}
#right {
width: 485px;
height: 100px;
}
HTML: Code: <div id="content"> <div id="left"> </div> <div id="right"> </div> </div> --------- But the right-div goes under or over the left-div. I've tried clear:both; between the div's, but it didn't help. URL Hey I am working on a website and adding a Twitter feed next to a testimonial section. As I am a new member it states I cannot share a link so I'm not sure how I am going to show you the error. The testimonial div is lowered down in comparison to the Twitter feed div and I'm not sure why. Any suggestions? EDIT: I have added a negative top value, but is this the correct way of doing it? cameronclarkelaw [dot] com / index5 [dot] html Thank you, Mani Howdy I have a website http://sopadvert.com/ which I am trying to modify after I messed up the old website. Now after creating the theme for the wordpress website, I have made some modifications so I can put a texture below the header ( at the beggining the texture was present only above the header ). It looks fine in Opera, FF, Chrome and Safari, but in IE it is a mess. Here is the code I have added: style.css Code:
#art-main
{
position: relative;
width: 100%;
left: 0;
top: 0px;
}
#teste
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 203px;
background-image: url('images/background.png');
background-repeat: vertically;
z-index: -100;
}
#art-page-background-glare
{
position: absolute;
width: 100%;
height: 264px;
left: 0;
top: 0;
}
#art-page-background-glare-image
{
background-image: url('images/Page-BgGlare.png');
background-repeat: no-repeat;
height: 264px;
width: 879px;
margin: 0 auto;
}
header.php Code:
<div id="art-page-background-glare">
<div id="art-page-background-glare-image"></div>
</div>
<div id="art-main">
<div id="teste">
</div>
<div class="art-Sheet">
<div class="art-Sheet-body">
<div class="art-nav">
<ul class="art-menu">
<?php art_menu_items(); ?>
</ul>
</div>
The red thing is what I have added. Can someone help me please? Thank you My site lines up fine on Firefox. However, when it loads on IE, my right most part of the page does not align properly. You can see my problem at dicebaseballdotorg. Any ideas or suggestions? The main things I can point out a Can't seem to get the logo to over lap. Can't seem to get FF to recognize the margins, but somehow IE can. There are other problems but those are the main two. I need to get this: http:// devbum. com/coded/audven/ to look like this: http:// devbum. com/coded/audven/audven.png Any help is greatly appreciated! I know I'm not supposed to post links but there really is no other way to receive help with this problem otherwise. I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- #wrapper{ font-family:Verdana, Arial, Helvetica, sans-serif; margin-left: 20px; width: 550px; font-size: 12px; line-height: 22px; letter-spacing: 0.5px; color: #666666; } #topimg { margin: 20px 0; padding-bottom: 20px; border-bottom: 1px dotted #CCCCCC; text-align:left; display:block; } #secondimg { margin: 0 0 0 20px; text-align:left; display:block; } #bodyimg{ padding: 20px 0px 20px 20px; float:left; display:block; } #listtable{ padding-top: 20px; padding-bottom: 20px; float:left; font-size: 10px; letter-spacing: 0.5px; color: #891C46; list-style-type: none; line-height:18px; } #listtable li{ margin: 1px; padding: 1px; } #listtable div { margin: 1px; padding: 1px; background-color: #F7F7F7; } --> </style> <title>Carlton</title> </head> <body> <div id="wrapper"> <div id="topimg"> <img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33"> </div> <div id="secondimg"> <img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23"> </div> <ul> <li>Cinema Advertising is available in weekly blocks starting on Fridays.</li> <li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li> <li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li> <div id="listtable"> <table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet"> <tr> <td width="105"> <li> <div>5”</div> </li> <li>10”</li> <li> <div>20”</div> </li> <li>30”</li> <li> <div>40”</div> </li> <li>45”</li> <li> <div>50”</div> </li> <li>60”</li> <li> <div>90”</div> </li> </td> <td width="95"> <li> <div>.3”</div> </li> <li>.5”</li> <li> <div>.8”</div> </li> <li>.1.00”</li> <li> <div>.1.33”</div> </li> <li>.1.50”</li> <li> <div>.1.67”</div> </li> <li>.2.00”</li> <li> <div>.3.00”</div> </li> </td> </tr> </table> </div> <div id="bodyimg"> <img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182"> </div> <li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li> <li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li> <li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li> </ul> </div> </body> </html> I'm trying to place some content inside a main "box", and I can't seem to get the length of the "box" div to expand to fit the content inside it. It seems like the DIVs inside aren't actually inside it. The only way I can make it fit is if i actually specify a "height" on the first DIV. <div style="width:700px; background-color:#000000; border-width:.1em; border-style:solid; padding:2em; margin-left:auto; margin-right:auto; margin-top:2em; border-color:#999999; height:1000px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#FFFFFF;"> <div style="width:300px; float:left; margin:2em; clear:both;"><center><img src="../images/halihomeless.jpg" /></center> <br /><center><img src="../images/luvhali.jpg" /><br /> <div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text </div> </div> <div style="width:300px; float:right;margin:2em;"><center><img src="../images/haitihomeless.jpg" /></center> <br /><center><img src="../images/luvhaiti.jpg" /> <div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text </div> </div> <div style="float:right; width:650px; margin-bottom:2em; right:52px; top:15px; padding:2em; color:#CCCCCC; font-size:10px;">IMAGE" align="right" border="0" / ></a><p>luvHALI and luvHAITI are ministries of Deep Water Church in Halifax, Nova Scotia, Canada.</p><p>To donate to either project, please visit <a href="placeholderforcanadagives">Canada Gives</a>.</p><p>If you wish, you can visit Deep Water Church</a> for more information about who we are.</p><p>1657 Barrington Street | Suite 536 | Halifax, NS, Canada | B3J 2A1 | 902.880.4266</p></div> </div> Thanks so much for any help! Robin Hi. I am a relative CSS newbie working on a new layout. My intended format is:
A sidebar (a div with no visible border) containing a set of smaller divs.
A main div for the content on the right.
About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is: Code: <div class="sidebar">
<div class="cv">
<font size="3"><b><center>
Current Version Info
</center></b></font>
</div>
<div class="ver">
<center>
Version:
<br/>
<b>0.0.0</b>
</center>
</div>
<div class="rel">
<center>
Released:
<br/>
<b>00/00/00</b>
</center>
</div>
<div class="nav">
</div>
</div>
<div class="main">
<center>
Lorum ipsum
</center>
</div>
The relevant CSS code is: Code: div.sidebar {
width: 202px;
float: left;
border: 0px solid #00CC99;
}
div.cv {
width: 200px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.ver {
width: 99px;
border: 1px solid #00CC99;
float: left;
background-color: rgb(33,33,33)
}
div.rel {
width: 99px;
border: 1px solid #00CC99;
float: right;
background-color: rgb(33,33,33)
}
div.nav {
margin-top: 30px;
width: 200px;
height: 100px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33)
}
div.main {
width: 500px;
border: 1px solid #00CC99;
background-color: rgb(33,33,33);
float: right;
}
In particular, div.main and div.sidebar are the ones giving me trouble. What would you recommend? Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it. Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. I have nested divs and on the most outer div i apply a background-color but it is only applied to half of the divs?? it happens BOTH in firefox & IE!! PHP Code: <style type="text/css"> /********** layout of the page ***********/ #top { background-color:yellow; clear:both; } /***************** Formatting top part of the page **************/ #tag { float:left; margin-left:8em; } #login { float:right; } #logo { margin-left:2em; float:left; clear:left; } #searchBox { float:right; clear:right; } #links2 { clear:right; background-color:yellow; } #links2 li{ font-size:0.8em; display:inline; float:right; text-decoration:none; list-style:none; padding:1em; } </style> </head> <body> <div id="top"> <div id="tag"> <p id="">Zahra Zahra Ltd</p> </div> <div id="login"> <p>Login/Register</p> </div> <div id="logo"> <a href="index.php"><img src="images/site/zahra.jpg" width="65" height="59" /></a> </div> <div id="searchBox"> <form action="search.php" method="post" style="margin:0em; padding:0em;"> <label>What are you shopping for?</label> <input type="text" name="search" value="search" size="14"/> <input type="submit" name="submit" value="Go" /> </form> </div> <div id="links2"> <ul> <li>Contact Us</li> <li>Testimonial</li> <li>Return Policy</li> <li>News</li> <li>FAQ</li> <li>about us</li> <li>Home</li> </ul> </div> </div> I'm trying to have a logo in a div next to a navigation menu that can align at a specific height in my logo. but im having a problem with my li background images staying within the ul background image. Can someone help me fix my code to align this properly? 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=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- load the typeface.js library and typeface.js fonts -->
<script src="js/typeface-0.14.js"></script>
<script src="fonts/haettenschweiler_regular.typeface.js"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<div id="navigation" class="menu">
<ul id="top-nav">
<li class="item4"><a href="#" title="Contact">Contact</a></li>
<li class="item3"><a href="#" title="About">About</a></li>
<li class="item2"><a href="#" title="Ideas">Ideas</a></li>
<li class="item1"><a href="#" title="Portfolio">Portfolio</a></li>
</ul>
</div>
<div id="logo"><span><a href="http://www.nadesignstudio.com/" title="NA Design Studio" rel="home">NA Design Studio</a></span></div>
<div class="clear"></div>
<!-- end #header --></div>
<div id="mainContent"><h1 class="typeface-js">Main Content </h1>
<div class="typeface-js">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. </p>
</div>
<!-- end #mainContent --></div>
<div id="footer">
<p>na design inc, new york :: all right reserved 2010</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
CSS CODE: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
.oneColFixCtrHdr #container {
width: 800px;
background-image: url(images/bg-stripe.png);
background-repeat: repeat;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColFixCtrHdr #header {
padding: 10px 10px 0 10px;
background: #000000;
}
.oneColFixCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColFixCtrHdr #mainContent {
padding: 0 10px;
}
.oneColFixCtrHdr #footer {
padding: 0 10px;
background: #000000;
font-family: "Courier New", Courier, monospace;
font-style: italic;
font-size: 8pt;
}
.oneColFixCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
.typeface-js {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
color: #FFFFFF;
}
#logo {
display: inline;
float: right;
text-align: left;
}
#logo a{
background-attachment: initial;
background-clip: initial;
background-color: initial;
background-image: url(images/logo.png);
background-origin: initial;
background-position: 0 0;
background-repeat: no-repeat no-repeat;
display: block;
height: 118px;
margin-bottom: 10px;
text-indent: -9000px;
width: 296px;
}
.msie #blog-title a {
margin-bottom: -10px;
position: relative;
}
#navigation {
background-image: url(images/bg-nav.png);
background-position: 0 0;
background-repeat: no-repeat no-repeat;
float: right;
height: 22px;
width: 474px;
margin-top: 75px;
}
#navigation ul {
}
#navigation li {
float: right;
height: 22px;
position: relative;
list-style: none;
}
#navigation li a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li a:hover {
background-image: url(images/bg-nav-btn.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
#navigation li.item1 a {
font-family: Haettenschweiler;
font-style: italic;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
font-size: 0.95em;
font-weight: bold;
background-image: url(images/bg-nav-btn1.png);
background-repeat: no-repeat no-repeat;
height: 22px;
display: block;
width: 69px;
overflow: auto;
}
#navigation li.item1 a:hover {
background-image: url(images/bg-nav-btn1.png);
background-position: 50% -22px;
background-repeat: no-repeat;
color: #000000;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
Example of problem If Image doesnt show below, view it he http://nadesign.pisigmachi.com/wp-content/uploads/2010/02/example.jpg URL can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. I'm working on an experimental website at http://www.abdn.ac.uk/~u12cb4/new/ I'm trying to get the main text to flow around the divs floating at either side but as you can see it's not happening. Can anyone offer a suggestion? Thanks, Bailz Hi guys Im having issues with unselectable text. Im using a full css layout with a fixed div header, footer and sidebar - along with a full css pop-out menu system. http://www.clevedonschool.org.uk Forgive the awful design it was the clients choice to use this layout, colour scheme and design! The problem Im having: The text that appears in the scrollable part of the page is unselectable where it lies parallell with the side nav. In Firefox links that appear in this 'dead-zone' cant be clicked either which isn't really acceptable. In IE its slightly better but less than ideal. Ive played about with z-index's and positioning but no luck. Does anyone have any suggestions? Does anybody know what the css attributes would look like for the right margin divs like (e.g. #smr-00) found in this tutorial? (see link) css.image.text.wrap.tutorial.htm I am a bit lost as to how to accomplish the following: I have two divs of unequal width, let's say 300 and 100 for example. I need to float both of these divs to the right and have them stacked on top of each other. That's easy enough on it's own, but I need text to wrap around them properly. ie if the wide one is on top the text should flow to it's left edge, then flow underneath it it the narrow divs left edge, then underneath the narrow one. I tried doing this with relaitve positioning, but have had no luck. If I simply float them both to the right, they line up side by side as expected. If I wrap them both in one container div, the text will flow to the left edge of the wide div but obviously not wrap underneath it to the left edge of the narrow div. Any ideas? Trying to achieve this: I'm having trouble figuring out how to float the right ad space correctly. This is what i've got so far: http://gatehouse.graffetto.com/floating_divs.html Code: Code: <html>
<head>
<style type="text/css">
.mainDiv {margin: 0; border: 1px solid black; padding: 10px; width: 600px; float: left;}
.image {height: 100px; width: 100px; background-color: red; float: left;}
.rightAd {float: right; background-color: blue; height: 250px; width: 300px; clear:right; margin-top: 300px;}
</style>
</head>
<body>
<div class="mainDiv">
<div class="image">test</div>
<div class="rightAd">test</div>
<div class="textDiv">
Text content
</div>
</div>
</body>
</html>
I know this is simple i just can't figure it out for some reason.. thanks for any help. Hi, I wonder if you can help me, In FF, this site has it's rows messed up. If you scroll down towards the bottom the colours become out-of-sync with the text. Can anyone help? (It works fine in IE and Opera) Thanks CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all Thanks again |
|||||||