|
HTML - 2 Or More Divs On A Line
Hi, I am making my own HTML homepage and I would like to have a button/text saying: 'Close', at the top-right. But I don't seem to be able to work out how to have multiple DIVs on one line. I have tried floating but it doesn't seem to work.
By the way, I am editing with SuperEdi. Similar TutorialsMan I have such a hard time with this and I have come across it again. Please see the screen shot below. In the red box you will see 2 check boxes. I want those check boxes moved up there where the text is that says "Move text up here". Here is the code for that fieldset... Code: <fieldset>
<legend>Default Picture</legend>
<input name="imagefile1" type="file">
<div class="checkBoxes">
<input id="default" type="checkbox"> Set as Default<br>
<input id="default" type="checkbox"> Remove Picture
</div>
</fieldset>
Here is the CSS for the checkBoxes Class... Code: .checkBoxes {
float: right;
}
Is their anyone that can help me out with this? I would post a link but the page is in a password protected area so it is restricted. -Thanks Ok I am having a brain fart moment and it is just one of those days when nothing is working. I am trying to align two divs on the same line but it isn't happening like I want. One of the divs is higher then the other. This is the page.... http://www.mesquitechristmas.com/local/browse.php It is at the top where it says "Mesquite Christmas Display Finder" on the left and "Account Profile | Log Out " on the right. Not the text on the right is where I want it. I need to bring the text on the left down to where the text on the right is. Hope I didn't confuse anyone. I have tried float: left on both of them and cleared them both and set widths and display inline etc. I have tried all kind of combination and can not get them to line up. I even set them inside of a div and no luck. The combination I have now is the closest I can get it without it completely breaking the layout. HTML... Code:
<div class="headerTitle">
<h2>Mesquite Christmas Display Finder</h2>
</div>
<div class="loggedIn">
<?php if($_SESSION['email']){
echo"Account Profile | Log Out";
} ?>
</div>
CSS... Code: .headerTitle {
text-align: left;
}
.loggedIn {
text-align right;
}
Any suggestion? -Thanks Can anyone help me with this code to make the page fluid in all three browsers without showing spaces in between the sections? http://www.cpe.rutgers.edu/wetlands/certificate05.html Thanks in advance Okay, i have a problem with divs on my site i have 4 divs, the first one is the holder, he's around the other 3. Then there are 3 divs that have to be placed next to each other, but that isn't working! When i use float left or right it tottaly screwes up my page, does anyone know what i do wrong?? my code is: HTML Code: /********** Lay-out **********/
body{
margin:0;
padding:0;
background-color:black;
font-family:Tahoma;
}
.houder{
background-color:white;
width:982px;
height:500px;
margin-left:auto;
margin-right:auto;
}
.header{
height:120px;
width:980px;
margin:0;
padding:0;
background-image:url(Afbeeldingen/header.jpg);
}
.headers{
background-image:url(Afbeeldingen/headr.jpg);
background-repeat:repeat-x;
height:21px;
width:270px;
margin-top:1px;
font-family: Tahoma;
font-size:11px;
color:white;
padding-left:10px;
padding-top:7px;
}
a{
color:black;
text-decoration:underline;
font-size:11px;
font-family:Tahoma;
}
.Contenthouder{
height:340px;
width:980px;
}
.scheiding{
background-image:url(Afbeeldingen/scheiding.jpg);
background-repeat:repeat-y;
width:5px;
height:340px;
margin-left:280px;
}
/********** Menu **********/
.menu{
background-image:url(Afbeeldingen/menu.jpg);
background-repeat:repeat-x;
width:980px;
height:14px;
margin-top:1px;
font-family: Tahoma;
font-size:12px;
padding-top:9px;
padding-bottom:10px;
}
a.menu:link, a.menu:active, a.menu:visited{
color:white;
text-decoration:none;
padding-left:10px;
padding-right:10px;
}
a.menu:hover{
background-image:none;
color:red;
text-decoration:none;
background-color:white;
}
/********** inlog **********/
.inloghouder{
width:280px;
margin-right:700px;
font-size:12px;
float:left;
}
.inlogtxt{
padding-left:20px;
font-size:11px;
}
.inloginput{
border:0;
background-color:lightgrey;
font-size:12px;
width:250px;
height:18px;
padding-top:4px;
}
.inlogknop{
background-image:url(Afbeeldingen/knop.jpg);
font-size:11px;
font-family: Tahoma;
background-color:grey;
border:0;
color:white;
font-weight: bold;
height:20px;
}
/********** Text **********/
.texthouder{
width:500px;
background-color:yellow;
height:300px;
float:right;
}
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="ne" lang="en">
<head>
<title>Familie Voetbalspel</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="houder" align="center">
<div class="header" /></div>
<div class="menu" align="left" valign="middle">
<a href="#" class="menu"><b>Home</b></a>
<a href="#" class="menu"><b>Uitleg</b></a>
<a href="#" class="menu"><b>Punten</b></a>
<a href="#" class="menu"><b>Ronde scores</b></a>
<a href="#" class="menu"><b>Klassement</b></a>
<a href="#" class="menu"><b>Spelers</b></a>
<span class="menurechts" style="margin-left:389px;"><a href="http://www.coachvanhetjaar.nl" class="menu"><b>Coach van het Jaar</b></a></span>
</div>
<div class="Contenthouder" align="left">
<div class="inloghouder">
<div class="headers">
<b>Inloggen bij het Familie Voetbalspel</b>
</div>
<div class="inlogtxt">
<br />
<b>Gebruikersnaam<br /><br />
<input type="text" name="gebruikersnaam" class="inloginput" /><br /><br />
Wachtwoord<br /><br />
<input type="password" name="wachtwoord" class="inloginput" /><br /><br />
<input type="submit" value="Inloggen" class="inlogknop"/><br /><br />
<a href="#">Wachtwoord vergeten?</a><br /><br />
<a href="#">Geen account?? Hier aanmaken!!</a>
</div>
</div>
<div class="texthouder">
</div>
<div class="scheiding">
</div>
</div>
</div>
</body>
</html>
contenthouder is the holder, inloghouder de div on the left, scheiding the div in the middle and texthouder the div on the right Hello, I've been dealing with this problem and it seems fairly simple but has got me scratching my head. The page works fine in Firefox (of course) but internet explorer draws this problem. There are gaps between the DIVS and I have tried messing with the margins and padding a bit but have had no luck. here is the page in Firefox: Here is the code in page. HTML Code: <div id="container"> <div id="head"><a href=""><img src="hd_1.png" border="0" /></a></div> <div id="ev_top"><img src="ev_top.png" /> </div> <div class="float"><img src="ev_l1.png" /> </div> <div class="ev1"> <div class="ev2">Dallas</div> <div><a href=""><img src="ev_dallas_tba.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">May - TBA</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div><div class="float"><img src="ev_gap1.png" /></div> <div class="ev1"> <div class="ev2">New York</div> <div><a href=""><img src="ev_ny.png" border="0" /></a></div> <div class="ev3"><div class="float"><img src="/bullet_blue.png" /></div> <div class="ev4"><a href="">04.29 - 87 Lounge</a></div> <div class="ev5">| <a href=""> More...</a></div> </div> </div> <div class="float"><img src="ev_gap2.png" /></div> <div class="ev1"> <div class="ev2">Store</div> <div><img src="ev_str.png" /></div> <div class="ev3"> <div class="float"><img src="bullet_yellow.png" /></div> <div class="ev4">Coming Soon</div> <div class="ev5">| <a href="#"> Updates...</a></div> </div> </div> <div class="float"><img src="ev_right.png" /></div> </div> <div id="ev_bot"><img src="ev_bot.png" /></div> <div class="float"><img src="ev_botr.png" /> </div> </div> <div id="blog_right"><img src="blog_rt_gap.png" /></div> <div id="blog_contain"> Style sheet: Code: body{
font-family:Arial, Helvetica, sans-serif;
width:713px;
background:#cfeae7 url(bg.png);
margin:0 auto;
height:100%
}
#container{height:100%; width:750px;}
#head{text-align:center; padding-right:25px;}
.float{float:left;}
.ev1{float:left; width:211px; background:url(ev_box_bg.png); font-size:24px; text-align:center;}
.ev2{float:left;text-align:left; text-indent:6px;color:#9ce4e4;padding-top:5px;height:100%;}
.ev3{padding-left:5px;text-indent:3px; padding-top:10px; width:211px;}
.ev4{float:left; font-size:12px;color:#b1e7e7; height:100%;}
.ev5{text-align:right; font-size:12px; color:#a2e6e6; padding-right:15px;padding-bottom:9px;height:100%;}
#ev_top{padding-left:6px; margin:0px; padding-top:0px;padding-bottom:0px;}
#ev_bot{float:left; margin:0px; padding:0px;}
Any ideas? Help would be appreciated! Thanks. Ok, I'm completely self taught, so don't be surprise if my html is a mess. I was told recently that I'm out of date in using tables and should be using divs, so in updating my website that's what I'm trying to do. The first one is that it doesn't display properly in IE. Can anyone tell me why, and how to rectify it? http://www.ratscallions.co.uk/Test/index.html There are other problems (as you'll be able to see), but I'd like to work that one out first. Thank you, Nim Could anyone explain to me how to put rounded corners on divs? Ive researched it a bit, but i want to be able to change the colours so i dont want to use image based if possible. found a way to do it but want more than one curved div but cant seem to be able t use different colours. I want to have one large rounded div on the webpage then some smaller ones within this one for nav menus and content etc, Have found some ideas but they dont work with IE. Hello, I am using a div for my website. I would like all the content to load in the divs, I don't want to create a new page for each site.How can I do this? Also, for the portfolio,I would like the images to change when you click the arrow, but I don't want to use frames or have each image on a new page. Can I do this within the div? Thanks! http://heartless-ink.com/treegirl.html Hello. I have problem with IE 6.0. 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>
<!- Holly hack for 3 px -->
<!--[if IE]>
<style type="text/css">
#_left, #_right, #_center { zoom: 1;}
</style>
<![endif]-->
<style type="text/css">
<!--
#_left {
float: left;
width: 200px;
color: #900;
}
#_right {
float: right;
width: 200px;
color: #00F;
}
#_center {
float: left;
width: 200px;
color: #00F;
}
-->
</style>
</head>
<body>
<div id="_left">Polyvios left menu<br />
sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_right">Polyvios right menu<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf<br />sdfdsfdsf</div>
<div id="_center">ddd</div>
</body>
</html>
The result of this code must be three in line menu. (the code is an example). But IE 6.0 can't understand divs with float. Any one who knows how I can fix it? Sorry for my English. Thank you. I have this div: Code: <div> Last Name <input name="data[Provider][last_name]" type="text" class="input_style" maxlength="100" value="" id="ProviderLastName" /> <input class="submit_style" type="submit" value="Search" /> </div> The way it's being displayed is having the last name string first and then the input and submit (both of them) under that last name string. I would like for all of these values to be on the same line. How can I do that? <p> doesn't work, tried it. Anything I can do in CSS? Hello, Please have a look at this site: http://www.shahspace.com/bow/home.html As you can see, I have two div colored pink and some space between them and around them. I'd like to get rid of all spacing but I can't. Here's the code: Code: <html>
<head>
<title>The Bow Tower</title>
<style>
body
{
background: url('content_bg.jpg');
background-repeat: repeat-x;
}
#textdiv
{
width: 230px;
height: 100%;
background-color: #ffaaaa;
float: left;
padding: 0;
margin: 0;
}
#imgdiv
{
width: 250px;
height: 100%;
background-color: #ffaaaa;
padding: 0;
margin: 0;
}
span
{
font-size: 18pt;
font-family: verdana;
font-weight: bold;
}
</style>
</head>
<body>
<div id="textdiv">
<br>
<br>
<span>
The Bow Tower<br>
</span>
<br>
<br>
<ul>
<li><a href="services.html">Services</a></li>
<li><a href="information.html">Information</a></li>
<li><a href="health_safety.html">Health and Safety</a>
<li><a href="index.html">Index</a>
</ul>
</div>
<div id="imgdiv"><img align=right src="bow tower.jpg" border=0></div>
</tr>
</table>
</body>
</html>
What can I do to get rid of the spacing (I'm working in IE9). I think this is a html question, though if it needs to be moved to CSS please let me know. Basically, I'm using divs for the first time. I've got the same rough layout for each page on the site, but in one of them I need to insert a table. When I insert the table it puts a great big gap in the div just above where the table starts. Why is it doing that? Can I stop it? How do I get around this? Help! Nim http://www.freewebs.com/stevenwang/ That is tables... Someone had mentioned I should create the website with divs. Any tips for doing this? Or is there a real simple way to do it real quick? And what are the added benefits to divs as opposed to tables? Or vise versa.. Any help, or info would be greatly appreciated. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="floating-1.7.js"></script>
<title>WEB PAGE TITLE GOES HERE</title>
<style type="text/css">
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #e7e7e7;
color: #000000;
float: center;
width: 100%;
font-family: 'arial',verdana,sans-serif;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.3em 3.3em;
background-color: #e7e7e7;
color: #000000;
text-decoration: none;
float: center;
border-top: 1px solid #323232;
border-bottom: 1px solid #323232;
}
#navcontainer ul li a:hover
{
background-color: #ffffff;
color: #000000;
}
td.padding
{
padding: 0px 0px 0px 30px;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'arial',verdana,sans-serif;">
<div id="floatdiv" style="
position:absolute;
background:#323232;
border-top: solid 3px #ffffff;
border-left: solid 3px #ffffff;
border-bottom: solid 3px #ffffff;
border-right: solid 3px #ffffff;
height: 165px;
width: 32px;
top:35px;
right:30px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
z-index:100">
<p align=center><img src="follow_right.png" alt="" border="0">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a><br>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</p></div>
<script type="text/javascript">
floatingMenu.add('floatdiv',
{
// Represents distance from left or right browser window
// border depending upon property used. Only one should be
// specified.
// targetLeft: 0,
targetRight: 30,
// Represents distance from top or bottom browser window
// border depending upon property used. Only one should be
// specified.
targetTop: 35,
// targetBottom: 0,
// Uncomment one of those if you need centering on
// X- or Y- axis.
// centerX: true,
// centerY: true,
});
</script>
<table width="100%" style="height: 100%;" border="0">
<!-- ============ HEADER SECTION ============== -->
<tr>
<td colspan="3" style="height: 10px;" bgcolor="#323232">
</td></tr>
<tr>
<td class="padding" colspan="3" style="height: 225px;" bgcolor="#e7e7e7"><a href="http://www.litofficial.com" target="_blank"><img src="lit_logo_001.gif" alt="" title="" border="0"></a>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li><li><a href="#">about</a></li><li><a href="#">blog</a></li><li><a href="#">collection</a></li><li><a href="#">contact</a></li><li><a href="#">order</a></li></ul>
</div>
</td></tr>
<!-- ============ NAVIGATION BAR ============== -->
<tr>
<td colspan="3" valign="middle" height="0" bgcolor="#ffffff">
</td></tr>
<!-- ============ MIDDLE COLUMN ============== -->
<tr>
<td class="padding" width="38%" valign="top" bgcolor="#ffffff">
<h2>recent posts</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
</td>
<td class="padding" width="36%" valign="top" bgcolor="#ffffff">
<h2>about</h2>
The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).
<td class="padding" width="26%" valign="top" bgcolor="#ffffff">
<h2></h2>
</td>
</td></tr>
<!-- ============ FOOTER SECTION ============== -->
<tr>
<td class="padding" colspan="3" align="left" height="120" bgcolor="#323232">
<a href="http://www.facebook.com/litofficial" target="_blank"><img src="facebook.png" alt="" title="We're on Facebook!" border="0"></a>
<a href="http://www.twitter.com/#!/litofficial2" target="_blank"><img src="twitter.png" alt="" title="Follow us on Twitter!" border="0"></a>
</td></tr>
</table>
Hello, I've came here because I am really stuck on this one problem... I can't float another DIV right so it's beside another DIV. ( http://www.lentonent.com ) Please could you fix this source code so one div is on the left and one is on the right and they both have a background of middle.png: Code: <html>
<head>
<style>
#middle
{
width: 900px;
background: url(images/middle.png) repeat-y;
}
#middle-left
{
width: 580px;
padding: 25px;
border: 1px solid #000;
}
#middle-right
{
width: 200px;
padding: 25px;
border: 1px solid #000;
float: right;
}
</style>
</head>
<body>
<div id="middle">
<div id="middle-left">
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
<h1>LEFT SIDE</h1>
<p>This text should be on the left hand side. I'm just going to write a little
crap now to make this paragraph really long and cool just like a frog standing on
a spoon. Yes very random indeed but that's not what the bus shelter said.</p>
</div>
<div id="middle-right">
<h1>Test</h1>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
Thankyou very much for your help! I want two divs to change colour when I hover over one of them. I tried on the first one: <div onmouseover="this.style.background-color:#FFFFFF; #other.style.background-color:#FF0000;"></div> but that didn't work. I think this is called 'calling' the div. Can anyone help? http://completely-gaga.com/ hi i want to make it so that my image fader sits ontop of my header, i've set the positioning of where i want it to be and tried z-index, but it's still not working. any idea what i need to do? Divs will be the death of me! I don't want to break down and put my whole page in a table, but i really can't see why they're behaving as they a http://www.monmount.com/v/template_60.html They don't line up properly, though they should all be 925px wide, and when you ctrl+- they eventually all spread out in a line. I think it's because I cheated and used the <style float:"right"> tag to keep them from stacking all on top of each other, but am neither sure that's the cause nor sure what to do differently if it is (since if i remove that than they'll be stacking on top of each other again). Any help would be appreciated! Thanks I have two divs next to eachother. The first DIV has a float:left with width:100%; The second DIV has float:right with width:200px; But for some reason when the left div gets to width it pushes the right div down. http://i43.tinypic.com/2u5q6ol.jpg What i really want is that the left DIV jumps to a newline when it reaches the right DIV instead of the right edge of my screen. Anyone any idea how to do this?? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blaat</title>
</head>
<body>
<div style="float:left; width:100%; margin-right:-220px; border:#000 1px
solid;">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj ffffffffff fffffffffff fffffff
fffffffff ffffffffff fffffffffff ffffffffff fffffffffff fffffffffffff
ffffffffff
<div style="float:right; width:200px; border:#000 1px solid;">
hhhhhhhhhhhhhhhh
</div>
</div>
</body>
</html>
Hi again I decided to use divs instead of tables for the html layout, now i have some issues and would like to ask you guyz around here. this is the html : PHP Code: <body> <div id="wrapper"> <div id="top"> <div id="logo"></div> </div> <div id="menlog"> <img src="logo.png" width="231" height="54" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Search: </a></li> <li><div id="searchbx"><form class="search" action=""> <input type="text" class="text-field"/> <input type="submit" class="submit" value="submit" /></form> </div></li> </ul> </div> </div> </body> and this is the css: PHP Code: #wrapper { text-align: left; margin: 0px auto; padding: 0px; width: 100%; /* border: 1px solid black; */ } #top { width: 100%; /* border: 1px solid black; */ } #logo { background: url('bg-top.png') no-repeat; padding: 0px 0px; margin: 10px 0px 0px 0px; width: 100%; height: 90px; position: relative; } #menlog { /* width was 100% */ width: 100%; font-size:15px; } and this is what i get : now my problem is that my menu wont remain in the same line as the logo and it goes to the next line under the logo which i dont want! i tried also to put this line : PHP Code: <img src="logo.png" width="231" height="54" /> inside a div which i gave "display:inline" property but that failed too ! it would be nice if someone can advice me. HI 1) Is there a way to make a div with a logo and text clickable? 3) I read it was bad for seo? 2) Is there a way to make the background image change on hover? This is css or javascript ? Thanks for reading |
|||||||