I'm trying to get a label to line up with a div vertically. I think a picture describes what I'm trying to do; the way it's rendered is how it looks. The MS Paint-style corrections in blue are what I'd like it to be. I have included the HTML and CSS below and removed as much extraneous code as I can to get to just the problem.
How can I get that label to go to the top of the type options?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* <![CDATA[ */
/* from reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* from Application.css */
html {
min-height: 100%;
background-color: White;
color: Black;
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.8em;
background-color: transparent;
}
input, textarea, select {
font-family: inherit;
font-size: inherit
}
div#EverythingDiv {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
div.MainContent {
margin: 0px auto 0px auto;
padding: 0;
min-height: 425px;
text-align: left;
clear: both;
}
/* from MyPage.css */
div.MainContent div.BasicInformationField {
}
div.MainContent div.BasicInformationField label {
display: inline-block;
width: 155px;
vertical-align: baseline;
}
div.MainContent div.BasicInformationField label.RadioLabel {
display: block;
font-weight: normal;
width: auto;
}
div.MainContent div.BasicInformationField textarea {
vertical-align: baseline;
font-family: inherit;
font-size: inherit;
}
div.MainContent div.BasicInformationField textarea#AddressTextArea {
height: 3.3em;
width: 250px;
}
div.MainContent div.BasicInformationField div#TypeOptionsDiv {
height: 3.3em;
width: 250px;
vertical-align: baseline;
font-family: inherit;
font-size: inherit;
display: inline-block;
}
div.MainContent div.BasicInformationField input.WebSite {
width: 250px;
}
/* ]]> */
</style>
</head>
<body>
<div id="EverythingDiv">
<h1 id="PageTitleH1">Title</h1>
<div class="MainContent">
<!-- view -->
<form action="MyPage" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<h2>Basic Information</h2>
<div class="BasicInformationField">
<label for="WebSiteTextBox">Web Site:</label> <input type="text" id="WebSiteTextBox" class="WebSite"/>
</div>
<div class="BasicInformationField">
<label for="AddressTextArea">Address:</label> <textarea id="AddressTextArea"></textarea>
</div>
<div class="BasicInformationField">
<label for="PhoneNumberTextBox">Phone Number:</label> <input type="text" id="PhoneNumberTextBox" class="WebSite"/>
</div>
<div class="BasicInformationField">
<label>Type:</label>
<div id="TypeOptionsDiv">
<label class="RadioLabel"><input type="radio" name="Type"/>Type 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 2 - Curabitur non odio hendrerit, hendrerit ante quis, rhoncus neque. Nam ac nisi non lorem accumsan dictum. </label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 3 - Morbi volutpat at eros ut dictum. Nam non arcu ornare, sodales eros nec, semper ante. Nunc tempor augue a est eleifend suscipit. Nam vel ornare leo.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 4 - Nam vel ornare leo.</label>
</div>
</div></form>
<!-- weiv -->
<div class="Clear"></div>
</div>
</div>
</body>
</html>
You can change this:
div.MainContent div.BasicInformationField label {
vertical-align: baseline;
}
To this:
div.MainContent div.BasicInformationField label {
vertical-align: top;
}
So I ended up doing this by floating everything left, having the labels clear both, and adjusting the margins so the baselines matched. Thanks for the conversation and the links.
jsfiddle.net/6Zjqh/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* <![CDATA[ */
/* from reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* from Application.css */
html {
min-height: 100%;
background-color: White;
color: Black;
}
body {
margin: 0;
margin-left: auto;
margin-right: auto;
color: #383838;
font-family: arial, helvetica, verdana, sans-serif;
font-size: 0.8em;
background-color: transparent;
}
input, textarea, select {
font-family: inherit;
font-size: inherit
}
div#EverythingDiv {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
div.MainContent {
margin: 0px auto 0px auto;
padding: 0;
min-height: 425px;
text-align: left;
clear: both;
}
/* from MyPage.css */
fieldset > label {
float: left;
display: block;
width: 150px;
clear: both;
margin-top: 5px;
}
fieldset > input[type=text] {
float: left;
margin-top: 1px;
}
fieldset > textarea {
float: left;
}
fieldset > div.Group {
float: left;
width: 300px;
padding-top: 5px;
}
fieldset > div.Group input[type=radio] {
/*margin: 0;
vertical-align: top;
padding: 0;*/
margin-top: -3px;
vertical-align: middle;
}
fieldset > div.Group > label {
display: block;
margin-bottom: 3px;
line-height: 1.2em;
}
/* ]]> */
</style>
</head>
<body>
<div id="EverythingDiv">
<h1 id="PageTitleH1">Title</h1>
<div class="MainContent">
<!-- view -->
<form action="MyPage" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
<fieldset>
<legend>Basic Information</legend>
<label for="WebSiteTextBox">Web Site:</label>
<input type="text" id="WebSiteTextBox" value="http://www.google.com/" />
<label for="AddressTextArea">Address:</label>
<textarea id="AddressTextArea" style="float: left; width: 350px; height: 4.4em;">Sample Address</textarea>
<label>Type</label>
<div class="Group">
<label class="RadioLabel"><input type="radio" name="Type"/>Type 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 2 - Curabitur non odio hendrerit, hendrerit ante quis, rhoncus neque. Nam ac nisi non lorem accumsan dictum. </label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 3 - Morbi volutpat at eros ut dictum. Nam non arcu ornare, sodales eros nec, semper ante. Nunc tempor augue a est eleifend suscipit. Nam vel ornare leo.</label>
<label class="RadioLabel"><input type="radio" name="Type"/>Type 4 - Nam vel ornare leo.</label>
</div>
</fieldset>
</form>
<!-- weiv -->
<div class="Clear"></div>
</div>
</div>
</body>
</html>
Related
How can i match the height of the h1 with the p tag?
I want to set the h1 to the left followed by the p on the same base line
.row_cont {
float: left;
width: 33.33333333%;
overflow: hidden;
border-left: 0.5px solid rgba(0, 0, 0, 0.37);
padding-right: 15px;
padding-left: 15px;
}
.row_cont h1 {
font-size: 70px;
float: left;
margin-right: 10px;
}
.row_cont p {
font-size: 12px;
margin: 0;
padding: 0;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="page_container">
<div class="row">
<div class="col-md-12">
<div class="row_cont">
<h1>1</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="row_cont">
<h1>2</h1>
<p>Aenean massa. Cum sociis natoque penatibus </p>
</div>
<div class="row_cont">
<h1>3</h1>
<p>Cras dapibus. Vivamus elementum semper nisi. </p>
</div>
</div>
</div>
</div>
I've tried vertical-align but it's not working, here is my fiddle
you could use the sibling css selectors...
h1, h1 + p {
line-height: 1.5;
font-size: 2rem;
font-weight: bold;
display: inline;
}
<h1>Title</h1><p>Paragraph</p>
EDIT:
this will only be possible by trial and error with the vaules, since the line (and the highest characters in a font) extends above the top of the digits you are using in H1. Basically, use display: inline-block; and vertical-align: top on both containers, then adjust the margin-top settings of both:
.h1_cont, .p_cont {
display: inline-block;
vertical-align: top;
}
.h1_cont h1 {
margin-top: 0;
}
.p_cont p {
margin-top: 5px;
}
https://fiddle.jshell.net/rk7nap5u/3/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
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, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { background: #e3e0ef url('images/bg.png'); font-size: 62.5%; line-height: 1; font-family: Arial, sans-serif; padding-bottom: 65px; }
::selection { background: #d7d0f3; }
::-moz-selection { background: #d7d0f3; }
::-webkit-selection { background: #d7d0f3; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
h1 { font-family: 'Wellfleet', 'Trebuchet MS', Tahoma, Arial, sans-serif; font-size: 2.85em; line-height: 1.6em; font-weight: normal; color: #756f8b; text-shadow: 0px 1px 1px #fff; margin-bottom: 21px; }
p { font-family: Arial, Geneva, Verdana, sans-serif; font-size: 1.3em; line-height: 1.42em; margin-bottom: 12px; font-weight: normal; color: #656565; }
a { color: #896dc6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* page layout structure */
#w { display: block; width: 700px; margin: 0 auto; padding-top: 35px; }
#container {
display: block;
width: 100%;
background: #fff;
padding: 14px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
/* comments area */
#comments { display: block; }
#comments .cmmnt, ul .cmmnt, ul ul .cmmnt { display: block; position: relative; padding-left: 65px; border-top: 1px solid #ddd; }
#comments .cmmnt .avatar { position: absolute; top: 8px; left: 0; }
#comments .cmmnt .avatar img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
box-shadow: 1px 1px 2px rgba(0,0,0,0.44);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#comments .cmmnt .avatar a:hover img { opacity: 0.77; }
#comments .cmmnt .cmmnt-content { padding: 0px 3px; padding-bottom: 12px; padding-top: 8px; }
#comments .cmmnt .cmmnt-content header { font-size: 1.3em; display: block; margin-bottom: 8px; }
#comments .cmmnt .cmmnt-content header .pubdate { color: #777; }
#comments .cmmnt .cmmnt-content header .userlink { font-weight: bold; }
#comments .cmmnt .replies { margin-bottom: 7px; }
<div id="w">
<h1>Threaded Comments Block</h1>
<div id="container">
<ul id="comments">
<li class="cmmnt">
<div class="avatar"><img src="images/dark-cubes.png" width="55" height="55" alt="DarkCubes photo avatar"></div>
<div class="cmmnt-content">
<header>DarkCubes - <span class="pubdate">posted 1 week ago</span></header>
<p>Ut nec interdum libero. Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus. Cras lacinia lorem sit amet augue mattis vel cursus enim laoreet. Vestibulum faucibus scelerisque nisi vel sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque massa ac justo tempor eu pretium massa accumsan. In pharetra mattis mi et ultricies. Nunc vel eleifend augue. Donec venenatis egestas iaculis.</p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/pig.png" width="55" height="55" alt="Sir_Pig photo avatar"></div>
<div class="cmmnt-content">
<header>Sir_Pig - <span class="pubdate">posted 1 day ago</span></header>
<p>Sed felis lorem, venenatis sed malesuada vitae, tempor vel turpis. Mauris in dui velit, vitae mollis risus.</p>
<p>Morbi id neque nisl, nec fringilla lorem. Duis molestie sodales leo a blandit. Mauris sit amet ultricies libero. Etiam quis diam in lacus molestie fermentum non vel quam.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/pikabob.png" width="55" height="55" alt="pikabob photo avatar"></div>
<div class="cmmnt-content">
<header>Pikabob - <span class="pubdate">posted 6 days ago</span></header>
<p>Listen you are going to get a kick out of this one. I've got to tell one of the funniest jokes of all time.</a></p>
</div>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>MyUsername - <span class="pubdate">posted 5 days ago</span></header>
<p>This is another anonymous comment. Maybe we can place <strong>some bold text</strong>. Then afterwards we can do some <u>underlined text</u>. And even a link to Google.</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/good-news-everyone.png" width="55" height="55" alt="Professor photo avatar"></div>
<div class="cmmnt-content">
<header>Professor - <span class="pubdate">posted 3 days ago</span></header>
<p>Good news, everyone!</a></p>
</div>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>Anonymous1 - <span class="pubdate">posted 2 days ago</span></header>
<p>Smaller third-tier inline threaded comment post. Look how deep we can go.</p>
</div>
</li>
</ul>
</li>
</ul>
<ul class="replies">
<li class="cmmnt">
<div class="avatar"><img src="images/maximus.png" width="55" height="55" alt="Maximus photo avatar"></div>
<div class="cmmnt-content">
<header>Maximus - <span class="pubdate">posted 5 days ago</span></header>
<p>Hey man, just another sub-reply. Okay bye.</p>
</div>
</li>
</ul>
</li>
<li class="cmmnt">
<div class="avatar"><img src="images/default.png" width="55" height="55" alt="default avatar"></div>
<div class="cmmnt-content">
<header>FreddieFantastic - <span class="pubdate">posted 11 hours ago</span></header>
<p>So this is neat.</p>
<p>Hello, world!</p>
</div>
</li>
</ul>
</div>
</div>
I am building a forum site and i found the following tutorial for threaded comments block. The following code is threaded comments block for my website but is not responsive for mobiles phones and tablets.
Can someone help me transform this code to responsive code?
I know that I should use media queries but don't know how to do it.
To be clear i just want an example.
The simplest implementation of media queries would be to put something like this at the bottom of the css that you submitted:
#media screen and (max-width: 767px){
/* YOUR STYLES GO HERE.
* You can now use the exact selectors you use above,
* and when the screen is under 767px wide (such as most phones)
* this CSS will render, rather than the previous code.
*/
}
Also don't forget the meta viewport header.
Ultimately, you will have to choose device widths that you want to break at.
You will also need to figure out what you want to be different on different browsers.
Also, don't forget to test in browsers.
For a good comprehensive primer on the core techniques of responsive, check out google's overview.
In this fiddle : http://jsfiddle.net/thbuf/110/
The div "test" is appearing before the | element. This is occurring despite that the "test" is added after | . Is there an issue with css ?
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='container'>
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right;">|</div>
<div style="display: inline; float:right">test</div>
</div>
</div>
That is because of the float: right on both the elements. This makes them act as though they are stacked from the right side of the screen and so the first element in the document order becomes the first from the right followed by the second element.
To reverse them, you just need to reverse the order.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right">test</div>
<div style="display: inline; float:right">test</div>
</div>
Just add new div to contain the sub divs like so:
<div style="float:right">
Hind the working fiddle: here
I have got a simple question. And I think the answer will be that easy for you too.
I am using Bootstrap for a website. All files are downloaded and connected in my php File.
I have got a container div with class container. In it all the website foo, such as header, ..., will happen.
Now I code two span6 divs in the header. I would like to have them next to each other. Like it is thought.
But they the second div is displayed under the first div.
What am I making wrong?
Here are my files:
index.php
<!doctype html>
<!-- Developer: Raphael Klein - http://austrianmultimedia.at/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="<?php echo $sitePath; ?>">
<meta name="author" content="<?php echo $author; ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">
<script src="js/jquery-1.10.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- my CSS -->
<link rel="stylesheet" href="css/doktorhaiden.css">
</head>
<body>
<div id="container" class="row, container">
<header>
<?php include("header.php"); ?>
</header>
<div class="row">
<div id="left" class="span4">
<div class="element" id="navLeft">
<ul>
<li><h1>Home</h1></li>
<li><h1>Über uns</h1></li>
<li><h1>Kontakt</h1></li>
</ul>
</div> <!-- element -->
</div> <!-- left -->
<div id="right" class="span8">
<div id="home" class="element">
<h1><hr width="100px">Willkommen<hr width="200px"></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<img class="thumbnail" src="graphics/placeholder.png">
</div> <!-- home -->
<div id="ueberuns" class="element">
<h1><hr width="100px">Über uns<hr width="300px"></h1>
<div class="span4">
<h2>Dr. (med) Katharina Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
<div class="span4">
<h2>Dr. (med) Elmar Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
</div> <!-- ueber uns -->
</div> <!-- right -->
</div>
</div> <!-- container -->
</body>
</html>
my header.php
<div class="row">
<div id="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
and finally my css-File
/* Developer: Raphael Klein - http://austrianmultimedia.at/ */
/* #group undo defaults margins and paddings */
/* INIT */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------- #end INIT */
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 0px;
}
.row {
margin-left: 0px;
*zoom: 1;
}
#container {
}
body {
background-color: #fff;
font-family: 'Raleway', sans-serif;
line-height: 21px;
}
header {
height: 100px;
}
#left {
background-color: #3F3F3F;
text-align: right;
}
#right {
margin-left: 10px;
}
#left h1 {
color:#5AD1E5;
font-size: 2em;
line-height: 0.7em;
}
#right h1 {
font-size: 2em;
}
#right h2 {
font-size: 1em;
color: #CC9E44;
}
#right h1 hr {
display: inline-block;
top: 12px;
left: 10px;
position: relative;
border: 0;
border-top: 2px solid #5AD1E5;
margin-right: 20px;
}
.element {
padding:10px 10px 10px 10px;
}
#navLeft {
margin:0px 10px 20px 0px;
}
/* Seitenbereiche */
#home {
/*background-color: #FFCE00;*/
}
/* Images */
.thumbnail, .thumbnailHoch {
border: 1px solid #5AD1E5;
padding: 10px 10px 10px 10px;
}
.thumbnail {
width: 350px;
}
.thumbnailHoch {
height: 200px;
}
hr {
/*height: 24px;
background: url('flourish.png')
no-repeat 50% 50%;
margin: 3em 0;
border: 0;*/
}
I would be very happy, when you can help me!
Yours, Raphael
Isn't it supposed to be class="span6"? Try the following:
<div class="row">
<div id="span6" class="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" class="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
Use class instead of id.
<div class="span6">
I'm using the following code to render a full background, a box, header and footer. Everything works greats in all browser (ie8+, I don't care for ie7). But in ie8 a 1px border is rendered around the background. Why?
<style type="text/css">
/*
start reset
http://meyerweb.com/eric/tools/css/reset/
*/
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, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
end reset
*/
.header, .footer
{
position: fixed;
z-index: 2;
left: 0px;
width: 100%;
background: white;
opacity: 0.4;
filter: alpha(opacity=40);
}
.header
{
top: 0;
height: 30px;
}
.footer
{
bottom: 0px;
height: 30px;
}
.box
{
position: relative;
float: right;
z-index: 2;
margin: 100px 100px 0 0;
width: 300px;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
}
.background
{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.background img
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
p
{
font: 15px/2 Georgia, Serif;
text-indent: 40px;
}
</style>
</head>
<body>
<div class="header">
Vestibulum erat wisi.
</div>
<div class="box">
<p>
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sitamet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, erosipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enimin turpis pulvinar facilisis. Ut felis. Praesent
dapibus, neque idcursus faucibus, tortor neque egestas augue, eu vulputate magna
eroseu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsanporttitor,
facilisis luctus, metus.
</p>
</div>
<div class="footer">
Vestibulum erat wisi.
</div>
<div class="background">
<img src="http://mslove88.files.wordpress.com/2011/10/mountain.jpg" alt="" />
</div>
Do you use a reset stylesheet?
Because it can be a body margin/padding setting. Every browser has is own default CSS stylesheet and a reset stylesheet 'resets' it all to 0 making them all the same.
First one in the Google results: http://meyerweb.com/eric/tools/css/reset/
Just place the following code on CSS inside <style> and I hope it will solve your problem.
html { border:none; }
I am also faced the same problem in my site. So i give the values in negative points like as below. Try it. I do it for body section. You may try this for form, div also.
<body style="margin-top: -10px; margin-left: 0px; margin-right: 0px; padding: 0px;>
Change your code like below. Try also on div, form, body tags one by one.
.background img
{
position: absolute;
top: -5;
left: -5;
right: -5;
bottom: -5;
margin: auto;
min-width: 50%;
min-height: 50%;
}