I need to know why the following code:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#right
{
float:right;
}
#content
{
margin-top:20px;
}
</style>
</head>
<body>
<div id="right">a</div>
<div id="content">b</div>
</body>
</html>
Applies the 20px margin top also at the #right div.
Two things are missing: 1) clear:right; within #content. 2) widths need to be specified so that you are able to apply clear:right without the div's stacking.
<html>
<head>
<title></title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
#right
{
float:right;
width:24%;
border:1px solid red;
}
#content
{
margin-top:20px;
width:74%;
clear: right;
border:1px solid aboue;
}
</style>
</head>
<body>
<div id="right">a</div>
<div id="content">b</div>
<div style="clear:both;"></div>
</body>
</html>
I've added the borders so it is easier to view.
it doesn't, strictly. (the margin isn't applied to #right) floating takes the element out of the flow of the document.
add clear:right to #content
and floated elements ~should~ have a width.
It works fine when you:
#content {
margin-top: 20px;
clear: right;
}
Related
I want to create a contact me section on a website i'm making but the problem is my whole website has text-align:center and i am using a definition list for the contact information. is there a way i can still use the wrapper for my page but align the text to the left without it going out of the white border?
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:1000px;
background-color:#666666;
}
#body1 {
background-color:#666666;
width:1000px;
height:405px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body2 {
background-color:#666666;
width:1000px;
height:800px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body3{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body4{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
#body5{
background-color:#666666;
width:1000px;
height:500px;;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#999;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
color:white;
font-size:20px;
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
color:#000000;
background-color:#CCC;
}
body {
background-color:#333333;
}
#portrait {
position:relative;
top:20px;
right:420px;
}
#headerhome {
position:relative;
bottom:130px;
left:50px;
font-size:30px;
text-decoration:underline;
font-family:arial;
color:#CCCCCC
}
#goal {
margin-left:40px;
text-align:left;
text-indent:40px;
position:relative;
bottom:110px
}
.tab {
margin-left:40px;
}
#contact {
position:relative;
right:390px;
text-align:left
}
HTML:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>
<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
<dt><h3>Phone Number</h3></dt>
<dd>XXX-XXX-XXXX</dd>
<dt><h3>Email Address</h3></dt>
<dd>XXXXXX#gmail.com</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
If i understand you correctly then your problem can be fixed using two things:
in #contact css add "!important" after the "text-align:left;" on the same line
add margin if it overlaps.
If this doesnt answer your question please send me a link so i can see what is happening.
hope i helped.
#contact {
text-align:left;
} Might work. position:relative; Try removing. Because CSS goes from top to bottom and over-writes the properties with new values.. Check this
If you want to keep the "contact block" in the body3 (which is centered), why you added the code - "right: 390px;" to the #contact, I do not see the reason. So if you delete it everything will be okay.
Have you tried this?
dl {
text-align: left;
}
Edit: I added the above to your css and the list was aligned to the left.
remove the text-align:center from css in html tag and add text-align attribute in every div tag so you will get align as you want
I just want to vertically align elements in my header. That would be really easy with tables but can't figure how to do it with CSS. I want to vertically align all 3 elements withing the black bar : "Logo", "Rechercher" and the text input.
Here is the CSS:
body {
margin:0;
padding:0;
font-size:100%;
}
#header {
background-color:#303030;
height:3em;
}
#logo {
color:#EEEEEE;
font-size:2em;
line-height:1.5em;
padding:0 30px 0px 10px;
display:inline;
}
#recherche {
color:#EEEEEE;
font-size:1.5em;
display:inline;
}
#recherche input {
width:300px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius:4px;
}
And the HTML :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/mainframe.css">
</head>
<body>
<div id="header">
<div id="logo">Logo</div>
<form id="recherche" action="/" autocomplete="off">
<label for="rechercher">Rechercher</label>
<input type="text" name="recherche">
</form>
</div>
</body>
</html>
here is a solution that works fine:
you can add line-height:size_px to each element that you want it's children to be aligned vertically. (e.g. size_px := 10px). The line-height should be the same as the parent height (height).
try:
jsfiddle.net/rjCBR/
Replace body and #header of your css with the following code:
body {
margin:0;
padding:0;
font-size:100%;
width: 100%;
display: table;
}
#header {
background-color:#303030;
height:3em;
display: table-cell;
vertical-align: middle;
}
Using Vertical-align: middle;, as other have suggested, aligns the bottom of the text for each element, which looks odd for an input box where the bottom of the actual element will be substantially below the text.
Try adding the following properties to the input css
height: 24px;
vertical-align: text-bottom;
jsFiddle
I have a page with a container div 900px wide, margin is auto. I have a header tag within this 150px high.
I want the header to consist of ann image on the left, some text and then another image on the right (opposite the imagine on the left). When I put two img tags in the header div, the second image is on lower than the first. I've tried amending to an inline display without any luck.
Any ideas?
CSS
html, body {
background-color: #ccd6cc;
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
}
.hidden {
display: none;
}
#page-container {
width: 900px;
margin: auto;
background-color: white;
}
#header {
height: 150px;
background-color: yellow;
}
#content {
line-height: 18px;
}
img#mcclogo {
display:inline;
float:left;
margin:0;
padding:0;
}
img#bactulogo {
display:inline;
float:right;
margin:0;
padding:0;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="curvy.corners.trunk.js"></script>
<head>
<title>Intranet Layout</title>
<link rel="stylesheet" type="text/css" href="test_layout.css" media="screen" />
</head>
<body>
<div id="page-container">
<div id="header">
<img id="mcclogo" src="../images/logo.gif" alt="xx" width="244" height="48" />
<img id="bactulogo" src="../images/bactu3.gif" alt="xx" width="260" height="124" />
</div>
<div id="content">
Content
</div>
</div>
</body>
</HTML>
Assuming html is correct, http://jsfiddle.net/sbAvB/
css should be something like this then:
#main{
width:900px;
margin: auto; }
#header{
height:150px;
width:100%
}
#picL
{
float:left;
}
#text{
position:absolute;
left:50%;
right:50%;
width:70%;
}
#picR
{
float:right;
margin-right:0px; }
Likely the issue is a lack of a position/margin variables set in the css properties. To align multiple objects in a line, one way to do this is.
I will a style of asp.net webpage like:
body
{
font-family: Times New Roman, Serif;
color: #000000;
text-align: center;
min-height:100%;
height:auto;
}
#container
{
/*background-color: #00CCFF; */
margin: auto;
width: 100%;
}
#header
{
/* background-color: #FF00FF; */
width: 100%;
height: 95px;
background-image:url('../Images/Back_logo.png');
background-repeat:repeat-x;
background-color:Transparent;
}
#menu
{
/*background-color: #FFFF00; */
height:40px;
}
#left
{
/* background-color: #00FF00; */
width: 20%;
float: left;
text-align:left;
border:1px solid #C8E3F1;
background-color:#EEFFFF;
overflow:hidden;
}
#center
{
width: 79%;
float: right;
/* background-color: #FF0000; */
}
#footer
{
/*background-color: #008000; */
clear: both;
height:70px;
margin-top:10px;
background-image: url('../Images/footer.png');
background-repeat:repeat-x;
background-color:Transparent;
}
I have a problem is the height of page not 100%. I used min-height or height is 100% in body, but don't work. The footer change by the long of content center. How to fix?
The html is very simple:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="layout.master.cs" Inherits="layout" %>
<!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 runat="server">
<title>Layout</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="App_Themes/theme1/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="left">LEFT</div>
<div id="center">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"</asp:ContentPlaceHolder>
</div>
<div id="footer">FOOTER</div></div>
</form>
</body>
</html>
In other pages use this Master Page, the div have ID is center can stretch or shrink belong to the contain in it. So that the display of footer isn't exact.
Use HTML, Body
html, body {
height: 100%;
}
#footer
{
/*background-color: #008000; */
clear: both;
height:70px;
position:absolute;
bottom:0px;
margin-top:10px;
background-image: url('../Images/footer.png');
background-repeat:repeat-x;
background-color:Transparent;
}
We need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. As the container is a descendant of the body tag which is a descendant of the html tag, then this is required.
100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%
Put html { height: 100% } at the beginning and see if it helps.
Make sure that the height is set to 100% in every point of your Xpath layout hierarchy. That is html->body->form->div id="center"
style="height:100% "
You can then continue using style="height:100% " in the child pages that will inherit from ContentPlaceHolder2 at the inheriting content place holder.
There are areas you might need to adjust(lower) the % height to allow other elements to fit in the area e.g. the other div s.
Here is the code i'm working on it's not a page it's a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I'm asking myself what the heck is this margin for a while here
Let's picture that I can't use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?
Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?
Original 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>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="light-blue"></div>
<div class="light-green"></div>
<div class="heavy-red"></div>
</div>
</body>
</html>
Solved: solution is eliminate the spacing in the markup:
<!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>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>
</div>
</body>
</html>
The problem is caused by spaces in the markup between the divs. If you don't want to float them (why not I wonder), you have a couple of options.
Remove the spaces so that the markup is all on the same line.
If you don't ever want any text to appear in these divs then you can do this
div{font-size:0;}
I common practice in order your sites to be more cross browser compatible is to use a css reset file. Check this question https://stackoverflow.com/questions/116754/best-css-reset
in all your inner div classes use margin-left: 0px
.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}
.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
I have posted the final html at http://jsbin.com/uwavi3
I had to remove display: inline-block to get it to work on jsbin while on running it locally from a file I didn't have to. I think jsbin uses some sort of reset css.
Edit2 for float: left kinda layout
Sorry for misunderstanding the question.
Increasing the width of the parent div and using spans instead of div(for colored blocks like red, blue etc.) Works for IE8 and FF3.6. Check here http://jsbin.com/uwavi3/3
This is causing a margin on the left and right of every element (that is not display:inline):
* { margin:0 auto; }
You probably want this as your "reset" rule.
* { margin:0; }
You can then apply margin:0 auto to things that you want centered.