I would like to overlay a part of a text over an image with HTML CSS in order to obtain something like this.
But the best I manage to obtain is this :
How I can move the text a little bit to the left ?
Below my code :
Any tips on how to do this ?
Thank you very much !
This should work.
body {
background-image: url("https://i.stack.imgur.com/B9jjg.png");
background-repeat: repeat-y;
background-color: #fff;
background-size: 100%;
font-family: sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
h1 {
font-size: 42px;
color: #00ae82;
}
p {
font-size: 21px;
color: black;
line-height: 32px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
</head>
<body>
<div class="container">
<h1>
Lorem ipsum
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, ligula ac tempor lacinia, sem ligula rutrum lacus, nec maximus sem augue eu neque. Integer aliquet ligula nunc, vel pellentesque elit condimentum vel. Sed fermentum dolor ex, vitae porta mi venenatis ac. Praesent imperdiet rhoncus fermentum. Vivamus ac dui euismod, convallis erat sed, cursus diam. Fusce vitae justo ornare, placerat elit quis, ornare tellus. Vivamus iaculis lorem in efficitur imperdiet. Proin quis dolor tincidunt, maximus ante vel, ullamcorper leo. Sed urna turpis, dictum vitae accumsan non, suscipit sed lorem. Ut molestie ac lectus id ornare. Nunc id est libero. Vivamus euismod erat vel pharetra pharetra. Donec pulvinar eleifend lorem scelerisque commodo. Nam nibh augue, vulputate vitae dolor et, dapibus mollis dolor.
</p>
</div>
</body>
</html>
Related
I am using a 1400px header (the size of the width of my image). Because of my header my following text is not displayed instead of my page
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I tried flex, text align. Nothing to do I can not center my text in the middle of my page
Is this what you had in mind?
body {
background-color: blue;
}
.infos {
display: flex;
justify-content: center;
color: white;
width:1400px;
margin:0 auto;
}
header {
width: 1400px;
height: 787px;
background-color: black;
margin:0 auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
justify-content only has an effect if there's space left over after your flex items have flexed to absorb the free space. It doesn't align the text itself.
Change justify-content:center; to text-align:center;
For more info check out this answer
If you want to center every line of text to the center of parent element use
text-align: center
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
text-align: center;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
Simplest way to center a div use using margin: auto
body {
background-color: blue;
}
header {
width: 1400px;
height: 787px;
background-color: black;
}
.infos {
width: 50%;
margin: auto;
}
<link href="https://unpkg.com/tailwindcss#%5E1.0/dist/base.min.css" rel="stylesheet" />
<header></header>
<div class="infos">
<p>soremm ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi mauris, lobortis eu rutrum in, tempor ac turpis. Donec hendrerit finibus leo vel iaculis. Suspendisse pretium sapien justo, at pulvinar elit egestas eu. Sed accumsan, lacus ac pharetra
iaculis, lorem nisl eleifend tellus, varius feugiat mauris leo sit amet nibh. Cras consectetur dictum ligula et interdum. Nulla facilisi. Sed eget erat a neque varius feugiat. Vivamus fermentum dapibus leo non convallis. Donec non purus quam. Etiam
ut turpis libero. Morbi ex orci, consequat pulvinar urna ac, blandit ultrices mi</p>
</div>
I created a website which basically consists of a button and everytime that you click on the button a sentence appears above it.
As Background I´ve set a picture. On Mobile I have the Problem that when a long sentence appears the content gets stretched so much that you have to scroll to reach the bottom of the page and at the bottom of the page appears a blank space underneath the picture. This whitespace doesnt appear in the developer tool though, just on my real phone.
So far I´ve been searching quite some time looking for a solution but i didnt find one. I though about disabling background-repeat: no-repeat; in media query but this would have unnice side effects.
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
background-image: url('../Images/BG.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
This is the HTML
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
I want the background-picture to allways fill the whole screen and to have no white spaces.
Greetings and thanks for your help.
The problem as i guess is happening because of your content overflowing its container block, so the body shows the white extra space on the bottom because text took more space than it should,one of the solutions that i found to your problem is by setting your vertical overflow to auto using overflow-y:auto
html, body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow-y:auto;
}
body {
background-image: url('https://image.freepik.com/vector-gratis/fondo-abstracto-acuarela-efecto-grunge_1340-4291.jpg');
background-repeat: no-repeat;
background-size:cover;
color: #FFF;
font-size: 125%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.5;
text-align: center;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Generator</title>
<link rel="stylesheet" type="text/css" href="Css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0>
</head>
<body >
<div id="main">
<header class="header">
<h1> Generator<span style="color:red">.com</span> </h1>
</header>
<div class="mainContent">
<article id="spruchErstellen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas justo sit amet cursus tempus. Ut nec ligula vestibulum, aliquet tellus ac, pellentesque dolor. Fusce egestas congue nibh vel ultrices. Duis mollis arcu at sollicitudin tempus. Nam sed felis quis ligula dictum fermentum. Sed eget arcu sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo tellus, tempus faucibus arcu sit amet, tempor dignissim purus. Etiam rutrum fermentum accumsan. Sed interdum libero in laoreet aliquam. Integer sed dolor enim. Fusce aliquam ullamcorper dictum. Sed vehicula euismod felis, ornare condimentum metus dictum vel. Nam vestibulum ante eget ipsum efficitur pellentesque. Aliquam ac facilisis magna, eget rutrum erat. Pellentesque at quam ut metus pellentesque vulputate in ut eros.
Nam varius fermentum felis vel fringilla. Aliquam et sapien accumsan, viverra leo vel, iaculis nunc. Nullam vehicula cursus orci in malesuada. Quisque lacinia metus non lectus elementum, vel commodo augue blandit. Mauris dictum odio ut purus mattis rhoncus. Nam auctor consequat risus auctor euismod. Morbi aliquam eros nisl, in egestas tortor feugiat a. Morbi viverra nec mauris sed tempus. Cras blandit sagittis eros.
Aenean tempor risus odio, ut pretium massa mollis sed. Duis finibus justo non sem volutpat convallis. Donec rutrum nec lectus vitae iaculis. Aenean vitae tellus tristique, porta turpis nec, volutpat sem. Aliquam molestie scelerisque arcu in auctor. Nam suscipit est at est dictum maximus. Nulla facilisi. Phasellus eget mattis mauris, nec bibendum arcu. Cras ornare egestas eleifend. Integer semper elementum euismod. Sed a ligula risus. Fusce commodo sem sit amet malesuada blandit. Donec at justo et metus viverra aliquam eget sit amet turpis.
Integer ligula tellus, accumsan volutpat risus vitae, suscipit accumsan neque. Quisque sed efficitur urna. Nullam mollis ultricies enim, vitae interdum ipsum consequat consectetur. Phasellus tincidunt nunc ut nisi ullamcorper, in laoreet erat mollis. Vivamus a semper orci, sed vestibulum risus. Aenean ultrices quam tristique vestibulum vulputate. Praesent rutrum tempor libero, vitae sollicitudin tellus iaculis sit amet. Proin vulputate tellus tellus, sit amet dignissim sem venenatis sed. Pellentesque cursus lorem eu mauris malesuada scelerisque. Integer quis pulvinar urna. Aenean vitae porta ex, sit amet hendrerit lorem. Mauris dictum magna vitae imperdiet placerat.
Duis consectetur nec sem et hendrerit. Fusce ut porttitor arcu. Curabitur condimentum volutpat congue. Phasellus mauris dolor, commodo id felis sit amet, ornare imperdiet ante. Integer dignissim elit sit amet magna rutrum, vitae interdum dolor dignissim. Phasellus vulputate ac quam non porta. Nam viverra sapien vel metus consequat, vitae rutrum risus posuere. Fusce nec pellentesque sapien. Curabitur non efficitur nunc, at sodales sapien. Donec vulputate, tellus id rhoncus euismod, mauris lacus imperdiet urna, non ornare risus quam a diam. Maecenas sit amet libero ante. Aliquam non mauris a risus vehicula imperdiet. Donec volutpat euismod vulputate. Morbi nec egestas lectus, a aliquet nisi.
</article>
</div>
<div class="mainButton">
<button class="button" onclick="neuerSpruch()">Go!</button>
</div>
</div>
<div id="space">
</div>
<footer id="mainFooter">
<p>Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="javascript.js"></script>
</body>
</html>
PS: the background image and the text are just for demonstration.
Im having a CSS problem. I want the paragraph under the image to be an image caption. So it should be under the image. Am i explaining it correctly? What am i doing wrong? (You can copy the code down here and just watch it in a browser)
<!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>
<title>Untitled Page</title>
<style type="text/css">
.CaptionRight
{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
.CaptionRight p
{
}
body
{
width: 500px;
}
</style>
</head>
<body>
<p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />
<p>
-This should be the image caption right under the image.
</p></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
accumsan ut nisl pharetra, porta egestas ligula.
Integer ultrices dolor neque, dapibus cursus lorem
volutpat sit amet. Aliquam volutpat tempus dapibus.
Vestibulum blandit, quam sit amet lacinia laoreet,
dui massa dictum turpis, sed mattis purus lorem non diam.
Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
Donec iaculis lorem elementum orci tempus rutrum.
Donec vel tortor iaculis lacus lacinia tempus sed vel est.
Suspendisse iaculis vestibulum tincidunt. Quisque varius
sapien porttitor malesuada volutpat. Sed a sapien nisl.
</p>
</body>
</html>
You cannot have <p></p> tags inside another
<!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>
<title>Untitled Page</title>
<style type="text/css">
.CaptionRight{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
Body{
width: 500px;
}
</style>
</head>
<body>
<span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" /><p>-This should be the image caption right under the image.</p></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis at lacus in auctor. Phasellus urna ligula, accumsan ut nisl pharetra, porta egestas ligula. Integer ultrices dolor neque, dapibus cursus lorem volutpat sit amet. Aliquam volutpat tempus dapibus. Vestibulum blandit, quam sit amet lacinia laoreet, dui massa dictum turpis, sed mattis purus lorem non diam. Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu. Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit. Donec iaculis lorem elementum orci tempus rutrum. Donec vel tortor iaculis lacus lacinia tempus sed vel est. Suspendisse iaculis vestibulum tincidunt. Quisque varius sapien porttitor malesuada volutpat. Sed a sapien nisl.
Etiam ultricies tincidunt sagittis. Cras tortor turpis, blandit eu tincidunt eu, malesuada sit amet nisl. In ullamcorper tellus est, et volutpat dui pretium id. Nullam a dolor orci. Vivamus volutpat nisl vel eros feugiat, sit amet elementum est eleifend. Phasellus lorem sem, adipiscing eu lacus consequat, hendrerit feugiat risus. Donec non adipiscing felis. Suspendisse potenti. Mauris tempus id magna at euismod. Quisque non justo eu nulla consequat feugiat sed vel diam. Nulla nec tortor rhoncus, tincidunt elit et, sagittis libero. Phasellus sed nibh et arcu elementum lacinia sit amet nec dolor. Phasellus dictum pulvinar erat vel auctor. Fusce nibh massa, molestie et elit fermentum, fringilla aliquam tellus. Donec pulvinar auctor risus, id auctor nisi pellentesque pellentesque.
Ut ut auctor metus. Curabitur sit amet dictum nunc. Aliquam dignissim erat ac nisl pellentesque, at pellentesque nisi auctor. Ut dapibus iaculis volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas hendrerit ipsum ut dolor commodo feugiat. Praesent eu purus eu ipsum pharetra commodo at at odio. Maecenas elementum urna vitae congue scelerisque. Donec vel laoreet lectus, ut laoreet odio. Nam ut accumsan quam, adipiscing tincidunt libero. Aenean quis felis libero.<br /></p>
</body>
</html>
Just remove the P from the 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>
<title>Untitled Page</title>
<style type="text/css">
.CaptionRight
{
float: right;
vertical-align: top;
margin-left: 1em;
margin-bottom: 1em;
display:block;
border: 1px red solid;
}
body
{
width: 500px;
}
</style>
</head>
<body>
<p><span class="CaptionRight" style="width:300px;"><img src="http://www.dn.se/ImageHandler.axd/?id=1034780&imageFormat=original" alt="" />This should be the image caption right under the image.</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc lobortis at lacus in auctor. Phasellus urna ligula,
accumsan ut nisl pharetra, porta egestas ligula.
Integer ultrices dolor neque, dapibus cursus lorem
volutpat sit amet. Aliquam volutpat tempus dapibus.
Vestibulum blandit, quam sit amet lacinia laoreet,
dui massa dictum turpis, sed mattis purus lorem non diam.
Pellentesque imperdiet massa libero, et ultrices tellus tincidunt eu.
Vivamus urna magna, congue nec imperdiet nec, eleifend vitae elit.
Donec iaculis lorem elementum orci tempus rutrum.
Donec vel tortor iaculis lacus lacinia tempus sed vel est.
Suspendisse iaculis vestibulum tincidunt. Quisque varius
sapien porttitor malesuada volutpat. Sed a sapien nisl.
</p>
</body>
</html>
HTML5:
<!DOCTYPE html>
...
<figure>
<img src="#" alt="image">
<figcaption>My caption</figcaption>
</figure>
Fiddle
In this way?
This is how my site looks so far (Note: I'm kinda trying to teach myself how to do the HTML for this site right now. I'll worry about the design later. I know thats now how one should go about designing a site. But whatever)
http://imgur.com/10ZC7
For the header, is this HTML correct/efficient? If not, what is the correct/efficient way to achieve this effect for the header? The header is all one image.
Thanks for any help in advance!
HTML
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CogRobot Studios</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
<!--[if IE]>
<link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
</head>
<body>
<div id="wrap" class="container">
<div id="bigheader"> </div>
<div id="header" class="rounded-corners column span-24 last"></div>
<div id="content" class="column span-15 colborder">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi. Donec eget tortor nisl, vel laoreet nisi. Donec vel posuere ligula. Nullam mi risus, porta lacinia ullamcorper ut, mollis eget arcu. Nam justo dui, dignissim eu dapibus at, placerat vulputate ante. Suspendisse justo tortor, gravida quis scelerisque in, fringilla non eros.
</p>
</div>
<div id="sidebar" class="column span-7 last">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien. Aliquam erat volutpat. Morbi sed sem at nunc congue venenatis a blandit nisi.
</p>
</div>
<div class="rounded-cornersbottom" id="footer">
© 2005, Lorem ipsum dolor sit amet.
<br />
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</div>
</div>
</body>
</html>
CSS
#wrap{
position: relative;
top: 150px;
}
body {
background: background: url("../images/header.png");
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
p, ul, li, h1, h2, h3, h4 {
margin: 0;
}
h3 {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
#bigheader{
background: url("../images/gearheader2.png") no-repeat;
min-height: 347px;
min-width: 1062px;
top: -115px;
right: 0px;
position: absolute;
width: 100%;
z-index: -99;
margin: 0 auto;
}
#header {
width: 950px;
height: 177px;
}
#content{
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
width: 590px;
}
#sidebar {
float: right;
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
}
#footer {
background-color: #838383;
color: #c8c8c8;
text-align: center;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
h2 {
font-size: 110%;
}
.slogan {
color: #954b4b;
}
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
.rounded-corners {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius: 20px;
}
.rounded-cornersbottom {
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius: 20px;
}
Hi i have made the some changes in your HTML due to some errors so now its working fine.
And about the header part i have made few changes as mentioned below :-
#bigheader (i have applied here small circles images rather than your heavy large header image placed in header with positing).
#header (i have made the header completely css based use of border-radius & background color.)
You can see your updated HTML here :-
http://jsfiddle.net/KXGfj/23/
Hey you have used one of the css frameworks,. anyways yes i don't know if this is correct of an efficient way but i usually encapsulate the sub header div inside header div..
in your case something like.:
{(bigheader) {(header)}}
This is driving me nuts...
<!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>
<title></title>
<style type="text/css">
.cantWrapper { white-space: nowrap; }
.cantWrapper .floatedDiv { float: left; background-color: Blue; height: 16px; width: 16px;}
.cantWrapper .text { }
</style>
</head>
<body>
<div class="cantWrapper">
<div class="floatedDiv"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
</div>
</body>
</html>
In every other browser, the text floats after the blue box. In IE6 however (somewhat predictably), the text drops below the blue box.
...I just can't find an answer to this. The text cannot wrap, hence the nowrap.
-- Randomly, adding this makes the blue box disappear completely
The reason for this behavior is that .wrapper .text doesn't have a width set, and it also doesn't float. As a result, it will assume 100% width, as DIVs do by default, and when it uses 100% of its container's width, it cannot fit next to the blue box, but will show up immediately below it. To fix this, you need to set a width that is everything-16px, or you need to set float: left to the .text DIV.
The latter solution is more convenient as it doesn't require setting fixed widths, but it does require you to add a clearing DIV as the last child of .wrapper, or the content would not allocate any space in their container at all:
<div class="wrapper">
<div class="floatedDiv"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
<div style="clear: both;"></div>
</div>
your <div class="text"> needs a width setting on it.
Ah ha, we have found the answer: Thank you to everyone else who helped, and to Rosie for this.
<!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>
<title></title>
<style type="text/css">
.cantWrapper { position: relative; width: 100%; clear: left; white-space: nowrap; }
.cantWrapper .floatedDiv { float: left; display: inline; background-color: Blue; height: 16px; width: 16px;}
.cantWrapper .text { position: absolute; top: 0; }
</style>
</head>
<body>
<div class="cantWrapper">
<div class="floatedDiv"></div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque laoreet felis quis erat blandit non interdum eros aliquet. Nullam libero risus, commodo sed lacinia vitae, aliquet at lacus. Ut mattis, leo vel dignissim ullamcorper, augue risus dapibus purus, in suscipit nisi ante sit amet massa. Curabitur in magna sed mauris auctor adipiscing vehicula a nisi. Nulla id massa sapien, eu viverra odio. Curabitur sollicitudin libero quis nunc molestie lacinia. In dictum sapien ut eros scelerisque adipiscing. Fusce feugiat adipiscing elit, commodo placerat lacus molestie in. Phasellus pharetra vestibulum aliquet. Sed tincidunt pulvinar mattis. Curabitur congue est placerat risus iaculis quis condimentum neque sodales. Vivamus in urna purus, in luctus velit. Sed mollis orci sed mauris ullamcorper vulputate. Nullam eget ante nibh, at sagittis lectus.</div>
</div>
</body>
</html>
An attempt at a solution (but it won't validate and isn't pretty):
For IE6:
<style type="text/css">
.cantWrapper { white-space: nowrap; }
.cantWrapper .floatedDiv { display: inline; zoom: 1; background-color: Blue; height: 16px; width: 16px;}
.cantWrapper .text { display: inline; }
</style>
For non IE:
<style type="text/css">
.cantWrapper { white-space: nowrap; }
.cantWrapper .floatedDiv { display: inline-block; background-color: Blue; height: 16px; width: 16px;}
.cantWrapper .text { display: inline; }
</style>