In this I want the div #intro to float below the div #navtop.
At the moment it hovers below on the right side.
<style>
#wrapper {
width:850px;
height:auto;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
}
#header {
height:100px;
width:850px;
margin:0;
margin-top:25px;
background:url(img/header.png) no-repeat #000 ;
border:2px #000 solid;
}
#navtop {
width:auto;
height:45px;
float:left;
background:#000;
padding-right:8px;
}
#navtop a {
width:500px;
margin:0px;
margin-left:8px;
padding-left:4px;
padding-right:4px;
color:#FFF;
padding-bottom:0px;
text-decoration:none;
}
#logo {
height:40px;
width:40px;
margin-left:4px;
}
#navtop a:link {
background:#666;
}
#navtop a:hover {
color:#999;
}
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:right;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
margin:0px;
padding:0px;
}
body {
background:#999;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
Home
About
tour
photos
contact
</div>
<div id="intro">
<img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
<div id="about"> <h2>DJ TECHIE LUNCHBOX</h2>
<p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
leave any with a head without for for chips and shandy . chocolate malnurishment bring a chip bang mismosh to her long term goals
.</p>
.
</div>
</div>
</body>
It's because you have float: left; on #intro.
Try this:
#intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
edited to make the #about div float next to #intro div.
If you still want that floated to the left of whatever the other box (I assume you do), try adding a clear: left to the #intro CSS. This will cause the box to break down to below whatever element is causing it to move to the right and start a new line.
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
clear:left;
}
don't use float:left on #navtop. It wants to line #navtop and #intro divs beside eachother
I am not 100% sure I understand what you are trying to accomplish but i will take a stab at it
you could target your #navtop with a rule
#navtop{clear: right;}
or simply remove the float: left from the #intro
either one of these will move the #intro under the nav
however if you want the intro to be next to something you will have to use clear:right on navtop
Related
Im trying for some while already to properly align my page. In jsfiddle it seems to be looking nice, but in my widescreen monitor the section tag floats all the way to the left and makes a big mess!
I think I'm doing something wrong with the floating... But still: this is an exercise from my course and it says that i NEED to use the sections as display:block and align them with floating.
I've been stuck in this for a good while and I my course tutors dont answer!
Hope somebody can show me where I'm being mistaken.
HTML:
<body>
<header class="menu">
<img class="imglogo" src="img/TotalLogo.png">
</header>
<section class="apres">
<p>Paraíso dos Nerds</p>
<img src="img/Personagens.png">
<p>Jogos, Consoles, Acessórios e Figuras de Ação</p>
</section>
<nav class="menu">
<ul>
<li>Total Control</li>
<li>Consoles</li>
<li>Jogos</li>
<li>Quiz</li>
<li>Compras</li>
</ul>
</nav>
<footer class="ender">
<p>Av. Irmãos Mário, 234<br>
Tel: (21) 1234-5678<br>
contato#tecontrol.com.br
</p>
</footer>
</body>
CSS:
root {
display: block;
}
body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
}
a{
text-decoration: none;
display:block;
}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
line-height:50px;
}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;
}
.imgLogo{
border-bottom:2px solid;
}
/* Header, nav, section e footer */
header{
display:block;
margin-bottom:15px;
}
nav{
display:block;
width:240px;
float:left;
}
section{
display:block;
width:540px;
float:right;
}
footer{
clear:both;
}
nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}
The link to jsfiddle is: http://jsfiddle.net/67jrj/1/
Thanks!
Set the width of your page to what you like, 960px is a good standard. Create a div for each element needed to float in an area then clear the float with the next area. Also, rearrange the order of your elements in your html so they appear as you need them to. I'm including my example of your page, at least what I think your asking. :)
HTML:
<div class="menu">
<ul>
<li>Total Control</li>
<li>Consoles</li>
<li>Jogos</li>
<li>Quiz</li>
<li>Compras</li>
</ul>
</div>
<div class="apres">
<p>Paraíso dos Nerds</p>
<img src="img/Personagens.png">
<p>Jogos, Consoles, Acessórios e Figuras de Ação</p>
</div>
<div class="ender">
<p>Av. Irmãos Mário, 234<br>
Tel: (21) 1234-5678<br>
contato#tecontrol.com.br
</p>
</div>
</body>
</html>
CSS:
body {
background-color: #CCCCCC;
color: #4466AA;
font-size: 16px;
font-family: Verdana, Liberation;
margin: 0 auto;
width:960px;
}
a{
text-decoration: none;
display:block;
}
a:visited{
color:#0000FF;
}
a:link{
color:#0000EE;
}
.menu{
color:#0000EE;
list-style-image:url(img/cogumelo.png);
width:170px;
float:left;
line-height:50px;
}
.ender{
text-align:center;
font-size:16px;
padding-top:15px;
border-top:3px solid;
clear:both;
}
.apres{
text-align:center;
font-size:18px;
font-weight:bold;
width: 350px;
margin: auto;
}
.imgLogo{
border-bottom:2px solid;
}
/* Header, nav, e footer */
.header{
display:block;
margin-bottom:15px;
width:960px;
}
.nav{
display:block;
width:240px;
float:left;
}
nav li:hover{
color:#FFF;
background: #E2E2E2;
border-radius:5px;
-moz-border-radius:5px;
padding-right:3px;
padding-left:3px;
}
Hope this helps!
Set standard width for header, section(s) and footer, or better, wrap them all in a div, assign a class to it and set margin to that class. There's nothing called "root" element, replace that with html (that is what they mean by root element).
So, one more question.
How come that div with phone# image goes below parent div? I tried clear. Didn't help. I tried absolute positioning parent "pics", but it threw everything to the left.
See here
<div id="angies"></div>
<div id="est"></div>
<div id="pics">
<div id="logot"></div>
<div id="house"></div>
<div id="phone"></div>
</div>
#angies {height:124px;
width:347px;
margin-right:0px;
margin-top:0px;
float:right;
background-image: url(images/ang.jpg);
background-repeat:no-repeat;}
#est {height:16px;
width:165px;
margin-left:5px;
margin-top:5px;
background-image: url(images/est.jpg);
background-repeat: no-repeat;}
#pics {height:175px;
width:878px;
border:1px solid;
margin-left:auto;
margin-right:auto;}
#logot {height:169px;
width:360px;
border:1px solid;
float:left;
margin-bottom:0px;
background-image:url(images/logot.jpg);
background-repeat:no-repeat;}
#house {height:169px;
width:166px;
border:1px solid;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
background-image:url(images/house.jpg);
background-repeat:no-repeat;}
#phone {height:43px;
width:312px;
border:1px solid;
position:relative;
margin-bottom:0px;
margin-left:526px;
position:static;
background-image:url(images/phone.jpg);
background-repeat:no-repeat;}
p.s.
and how come these divs are going to the top with bottom margin of 0 pixels? It doesn't bother me this very moment, but i still want to know how come.
simple solution is make all of them float: left
#house { float: left; }
#phone { float: left; }
i have a problem in aligning the div's vertically,what should be problem?
here is my html code
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>
css
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}
i want the three div's to be aligned vertically together inside the parent, here is the demo
I'm not sure why you need so many redundant codes to achieve like what you describe, just do:
.recentProfiles
{
width:300px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
Demo: http://jsfiddle.net/VvqXF/
That's because of your margins. If you take clear:both off profile1 and then add float: left onto all profiles, then take off those margins.
Demo: http://jsfiddle.net/WC5gT/
Try using float:left on class profiles and then no margin on profile1, profile2, profile3
Working example: http://jsfiddle.net/rK38V/
Have all the boxes float left (float: left) and remove all margin properties, like this: http://jsfiddle.net/2ABmU/
You get the idea of float wrong. Here's the new code: http://cdpn.io/AvJqI
HTML
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
<div class="floatClear"></div>
</div>
CSS
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
.floatClear {
clear: both;
}
I am trying to something pretty simple.
I have two buttons inside a div. One needs to be float right, one needs to be float left
<div class="btnwrapper">
<div class="btnright"><span>Continue</span></div>
<div class="btnleft"><span>Back</span></div>
<div style="clear:both;"></div>
</div>
And the corresponding CSS
.calculator .btnwrapper { width:607px; }
.calculator .btnleft { float:left; border:1px solid green; }
.calculator .btnright { float:right; border:1px solid red; }
a.button { background:url(../images/bg-button-left.gif) no-repeat; float:right; height:29px; width:auto; padding:0 0 0 8px; display:block; color:#FFF; text-decoration:none; font-weight:bold; font-size:13px; cursor:pointer;}
a.button span { background:url(../images/bg-button-right.gif) top right; height:16px; padding:8px 8px 5px 0px; display:block; width:auto; cursor:pointer; }
Here is the results I'm getting in IE7. All other modern browsers handle this correctly.
Remove float: right from a.button.
With it: http://jsfiddle.net/K8XQr/
Without it: http://jsfiddle.net/K8XQr/1/
They look identical, except that losing float: right fixes it in IE7.
i'm struggling to find a solution to this anywhere. I have created a slider that works perfectly in Safari but when i view it in Firefox slider image 1 has no margin in between slider image 2 and neither 2 with 3 and so on. Creating a train of images that never quite fit in the slider window(almost like a lift opening at random points between floors).
second problem i'm having is creating the slider image as the link as apposed to just the .content h2 title being the link.
The slider is in Wordpress Epione theme.
any help would be greatly appreciated
this is my css-
/*SLIDER*/
#sliderwrap{float:left; width:auto; height:auto; background:none; margin-left:0px; margin-top:px; position:; z-index:3;}
.slidercontent{ margin-top:20px;width:auto; height:auto;}
#slider{ margin-left:0px; margin-top:0px; width:auto; height:auto;}
.content{ width:auto; margin-right:auto;}
.content p{ font-style:none; font-size:14px;}
.content h2{ position: relative; left: -650px; top:490px; font-family: 'helvetica; colour:#00000; font-size:10px; margin-bottom:15px; margin-top:20px;display:}
.content h2 a{ color:#00000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}
#slider img{width:auto; height:auto; ; margin-left:0px; margin-top:22px; min-height:225px; }
.sframe{ background:url(images/sliderimg.png) no-repeat; float:center; ; height:auto; float:center; position:; z-index:0; margin-top:12px; margin-left:60px;}
.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px}
#nextBtn{display:block; width:13px; height:14px; position:relative; left0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
and the front-page where the .php appears
<?php get_header(); ?>
<!--SLIDER-->
<div id="sliderwrap">
query('category_name= '. $slidecat .'&showposts='. $slidenum .'');
while ($sliders->have_posts()) : $sliders->the_post(); ?>
">
</div>
<div class="sl_control"></div>
<!--SLIDER END-->
<!--CONTENT-->
</div>
</div>
<!--CONTENT END-->
<!--SIDEBAR-->
<?php get_sidebar(); ?>
<!--SIDEBAR END-->
</div>
<!--Footer-->
<?php get_footer(); ?>
First of all:
Your CSS doesn't validate and I'm guessing Firefox is having issues parsing it as such. Try copying and pasting that snippet into http://jigsaw.w3.org/css-validator/ to see what I mean. Below is some (somewhat) corrected CSS:
/* SLIDER */
#sliderwrap {float: left; width: auto; height: auto; background: none; margin-left: 0px; z-index: 3;}
.slidercontent {margin-top:20px; width:auto; height:auto;}
#slider {margin-left: 0px; margin-top: 0px; width: auto; height: auto;}
.content{ width:auto; margin-right:auto;}
.content p{ font-style:none; font-size:14px;}
.content h2{ position: relative; left: -650px; top:490px; font-family: sans-serif; colour: #000000; font-size:10px; margin-bottom:15px; margin-top:20px;}
.content h2 a{ color:#000000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}
#slider img{width:auto; height:auto; margin-left:0px; margin-top:22px; min-height:225px; }
.sframe{ background:url(images/sliderimg.png) no-repeat; height:auto; float:center; z-index:0; margin-top:12px; margin-left:60px;}
.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px;}
#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
Note that this still won't parse for a couple of reasons -- first of all, float is either "left" or "right"; you can't do it "center". To do that with floats, you need to do things like "margin-left: 50%;" Secondly, fonts are always styled in some way -- you can't declare font-style as "none". I've left those in the above because I'm not sure how you want to deal with that.
Regardless, you can fork to different stylesheets based on browser in PHP; see:
http://php.about.com/od/learnphp/p/http_user_agent.htm
Hope this helps!
-æ.