As Illustrated in the next graphic I have a problem with my responsive code: I have 3 sections called square1, 2 and 3 with a white div inside. text on top of it and an icon with an absolute position. Everything fine from 920px to higher browsing. Now, from 720 to 940 pixels I'm trying to give this 3 elements a 50% of width, to display two on top and 1 at the bottom, but centered. so far is a mess. Could someone explain me what I'm doing wrong? my actual DEMO
HTML:
<div id="section2">
<div id="centralize2">
<div id="square1">
<div id="white1">
<img src="images/hexagon1.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square2">
<div id="white1">
<img src="images/hexagon2.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square3">
<div id="white1">
<img src="images/hexagon3.png" class="hexagon" />
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>
</div>
Thanks!!
You can use flexbox to achieve what you want. Don't use absolute positioning if it's not necessary. If the width is bigger than 940px, the divs will display next to each other. Try it out in the full version of the code snippet.
Also cleaned up some code, as you can't have multiple divs with the same id. That's not valid markup. Use a class instead.
#section2 {
position: relative;
background-color: #112e4c;
overflow: hidden;
}
#square1, #square2, #square3 {
margin-top: 59px;
}
.white1 {
margin: 20px;
background-color: #fff;
text-align: center;
}
.hexagon {
position: absolute;
left: 50%;
}
.title1 {
font-size:18px;
margin-top: 90px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}
#media all and (min-width:720px) {
#centralize2 {
display: flex;
flex-flow: row wrap;
}
#square1, #square2, #square3 {
flex-basis: calc(50%);
}
}
#media all and (min-width:940px) {
#square1, #square2, #square3 {
flex-basis: calc(100%/3);
}
}
<body>
<div id="section2">
<div id="centralize2">
<div id="square1">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur1</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square2">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur2</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
<div id="square3">
<div class="white1">
<h2 class="title1">Ipsum Dolor Consectetur3</h2>
<h3 class="description2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. </h3>
</div>
</div>
</div>
</div>
</body>
It has to do with your absolute positioning. Try removing the absolute positioning, and try floating the blocks left and add your margins as needed. Will try and get a working demo together for you asap, at work atm.
Got a chance to try and edit your demo, I believe you're looking for something like this https://jsfiddle.net/ah5zz8qq/
#section2 {
width: 100%;
background-color: #112e4c;
overflow: hidden;
}
#centralize2 {
width: 880px;
height: 310px;
margin: 40px auto;
text-align: center;
}
#square1 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#square2 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#square3 {
display: block;
float: left;
width: 33.3%;
position: relative;
}
#white1 {
width: 280px;
height: 250px;
background-color: #fff;
text-align: center;
position: relative;
}
.hexagon {
position: absolute;
left: 50%;
top: 0;
margin-left: -52px;
margin-top: -59px;
}
.title1 {
display: block;
font-size:18px;
font-family: 'Ubuntu', sans-serif;
color: #112e4c;
font-weight: 600;
}
.description2 {
font-size: 14px;
line-height: 16px;
margin-top:20px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
color: #8da0b4;
}
#media all and (max-width:940px) {
#centralize2 {
width: 90%;
}
#section2 {
height: 720px;
}
#square1 {
display: block;
width: 50%;
float: left;
}
#square2 {
display: block;
width: 50%;
float: left;
margin-bottom: 10px;
}
#square3 {
display: block;
clear: both;
width: 50%;
float: none;
margin: 0 auto;
}
#white1 {
width:300px;
}
}
#media all and (max-width:720px) {
#section2 {
height: 1070px;
}
#buttons {
margin-top:25px;
}
#square1 {
width: 100%;
}
#square2 {
width: 100%;
margin-top:340px;
}
#square3 {
width: 100%;
margin-top:340px;
}
#white1 {
width: 100%;
position: absolute;
}
}
}
Related
I would like to center correctly my title Learn About Us like for the title What we do, because there is a lag with the picture, I think?
I don't understand how to center like this example:
Here, the titles are aligned correctly.
I thank you in advance for your help and your time.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yooga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
nisl
nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
Since you have added -45px margin-left for .section-header p::before, you need to add +45px margin-left to .content .section-header p, to cancel out the effect.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.content .section-header p{
margin-left: 45px;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yoga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
I am trying to put this image in the left container but it seems to leak out in chrome and not in explorer.
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 10%;
width:300px;
height: 130px;
text-align:center;
}
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
.container div {
padding: 1%;
box-sizing: border-box;
min-height: 700px;
}
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
margin: 0 auto;
left: 10%;
width:300px;
height: 130px;
text-align:center;
}
.left-col, .right-col {
background-color: #f4f4f4;
width: 25%;
float: left;
}
.center-col {
width: 50%;
float: left;
}
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p><p>Lorem pretium </p>
</div>
<div class="center-col">
<h2>Center</h2>
<p>Lorem ipsum dolortempor.</p>
</div>
<div class="right-col">
<h2>Right</h2>
<p>Lorem tempor.</p>
</div>
</div>
The following example code for your reference.
<style>
.container{
width:100%;
position: relative;
}
.container div{
min-height: 700px;
height:100%;
padding: 1%;
box-sizing: border-box;
}
.left-col p{
text-align: justify;
width:270px;
}
.left-col img{
margin: 0 auto;
left: 10%;
width:270px;
height: 130px;
text-align:center;
}
.center-col {
width: auto;
margin: 0 300px;
float:left;
}
.left-col{
background-color: #f4f4f4;
position: absolute;
left: 0;
top: 0;
width: 300px;
}
.right-col {
background-color: #f4f4f4;
width: 200px;
position: absolute;
top: 0;
right: 0;
}
</style>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
<div class="center-col">
<h2>Center</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium</p>
</div>
<div class="right-col">
<h2>Right</h2>
<p>Lorem tempor.</p>
</div>
</div>
I have a div with some text and an image that should appear to the right of the text.
The problem is that the image is appearing on the right, but it is not beside the text. I have used float:right and clear option but it still doesn't work properly.
My code is:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
</div>
</div>
THIS is what I want to do.
Just put the floated element first:
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
It'll float off to the left and then your text will fill the space on the right.
By putting the text first, the image doesn't displayed until after the text element ends, so the image will be floated under the text. (Just like if you didn't float it, it would appear under the text).
Expand for a working snippet to see it in action:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px );
top:20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content{
border: 4px solid red;
width: 600px;
word-wrap:break-word;
}
.img{
margin-left: 15px;
float: right;
display:inline-block;
clear:both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
To achieve the expected result, the <img> should go before <p> tag in your HTML. Here is an example:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
Either put the image before the p tag, or put it inside the p tag (see my snippet).
By the way: When you apply float to an element, inline-block will have no effect at all, and also the clearing does nothing in this particular case.
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
text-align: left;
}
.img {
margin-left: 15px;
float: right;
}
<div class="box">
<div class="content">
<p><img src="http://placehold.it/150x250/000000/ffffff" class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
Essentially I am trying to use the <Div> tag to create a bottom border to separate different content on the page but when I scroll to the bottom and insert the div there to separate them, it will ignore the other tags I have put and attached itself to the previous div separator.
How can I fix this? I tried using a HR tag but it did the same.
This is my code:
div {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
margin: 0 auto;
}
#leftcolumn,
#rightcolumn {
border: none;
float: left;
min-height: 450px;
color: white;
}
#leftcolumn {
width: 50%;
}
.container {
margin-left: 10%;
width: 40%;
text-align: center;
}
#rightcolumn {
/* height: 100%;*/
width: 40%;
float: right;
background-color: #c9ccc9;
}
.border {
border-bottom: 40px solid #8dc43f;
}
p {
color: black;
}
.infotext {
color: #8dc43f;
margin-left: 30%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitle {
color: #8dc43f;
margin-left: 25%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlepower {
color: #8dc43f;
margin-left: 36%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.infotexttitlecomm {
color: #8dc43f;
margin-left: 17%;
font-family: 'ABeeZee', sans-serif;
font-size: 30px;
}
.bluetags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 176px;
margin-top: 4px;
}
.greentags {
width: 264px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 180px;
margin-top: -26px;
}
.orangetags {
width: 280px;
padding: 0;
/* transform:rotate(180deg);*/
display: block;
/* border-collapse:collapse;*/
margin-left: 175px;
margin-top: -15px;
}
.image {
position: relative;
width: 80%;
/* for IE 6 */
}
.titleimg {
margin-left: -60%;
margin-right: 10%;
}
imagetext {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.bgimg {
background-size: cover;
width: 100%;
height: 60%;
border-collapse: collapse;
display: block;
margin: 0;
padding: 0;
}
#container {
height: 400px;
width: 400px;
position: relative;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 43%;
top: 25%;
font-family: 'ABeeZee', sans-serif;
}
#secondtext {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 37%;
top: 30%;
font-family: 'ABeeZee', sans-serif;
}
<div id="cssmenu">
<ul>
<img src="turtletag.png" class="titleimg">
<li><span>Home</span>
</li>
<li><span>Features</span>
</li>
<li><span>App</span>
</li>
<li><span>Products</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<img src="googlestore.png" style="position:absolute; top:210px;left:70px; width: 10%;">
<img src="appstore.png" style="position:absolute; top:320px; left:77px; width:10%;">
Order Tags
<img src="iPhone5_Mockup_Template_Free_by_Ray.png" class="bgimg">
<p id="text">Turtle Tags</p>
<p id="secondtext">Always connected to the nest</p>
<div class="border"></div>
<div id="leftcolumn">
<div class="mainbody">
<img src="bluetags.png" class="bluetags hvr-float">
</div>
<div class="mainbody">
<img src="greentags.png" class="greentags hvr-float">
</div>
<div class="mainbody">
<img src="orangetag.png" class="orangetags hvr-float">
</div>
</div>
<a name="features"></a>
<div id="rightcolumn">
<h2 class="infotext">Features</h2>
<hr class="newstyle">
<img src="battery.png" style="margin-left:40%; width:15%">
<p class="infotexttitle">Long battery life</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse
potenti.
</p>
<img src="speaker-xxl.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitle">Noise Notifications</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="powericon.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlepower">Always on</p>
<p rows="4" columns="4" style="width:350px;margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
<img src="twoway.png" style="margin-left:45%; width:10%; margin-top:30px;">
<p class="infotexttitlecomm">Two way communication</p>
<p rows="4" columns="4" style="width:350px; margin-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna enim, aliquet non sagittis sit amet, euismod luctus risus. Aliquam venenatis arcu quam, id hendrerit dolor fermentum sed. Nullam congue molestie dolor quis egestas. Suspendisse potenti.
</p>
</div>
I've tried changing the css and I can't find anything that would cause it, But a fresh pair of eyes may be able to find something I cannot.
The problem here comes from how you constructed your page. You have a left/right column that was built using floats. when you use float, it takes the content in the float out of the general flow of the page. Try to remove those floats and it should work as expected.
I removed your floats in the fiddle and the border started working right.
https://jsfiddle.net/ahmadabdul3/ghogvcsx/4/
here's a basic idea on how floats work: the top boxes don't overlap because there is no float, but the bottom 2 boxes you only see green because the red one is floated so the green one takes its space. to avoid this, add an explicit height to the floated div, but then you can't have dynamically expanding content. https://jsfiddle.net/ahmadabdul3/bL8qLa6j/2/
and here's a basic idea of how columns work: https://jsfiddle.net/ahmadabdul3/bL8qLa6j/5/
Ok guys I have styled this very well, but there are a few quirks! I have tried everything and it looks great/good as a responsive site, but there are some issues. I cannot get the .therapy section to look the way I want it to. Full page it hugs the left margin, but looks good with my media queries. My question is how do i get it to look good on full page and be responsive as well. Thanks and hugs. I would like the margins to come in a few px and look like it is not using all the white space available. please help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="something.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body{
background-color: #f1f0d1;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 1.125em;
overflow: auto;
}
h1, h2, h3{
text-align: center;
padding-left: 5%;
color: #878e63;
}
p{
padding: 2%;
color: #878e63;
}
img{
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%;
background-color: #fefbe8;
border: 1px solid #878e63;
border-radius: 2px;
box-shadow: 0 0 10px 0px;
overflow: hidden;
}
#callout {
width: 100%;
height: auto;
background-color: #878e63;
overflow: hidden;
}
#callout p {
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #f1f0d1;
}
#callout p a {
color: #f1f0d1;
text-decoration: none;
}
header {
width: 96%
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 90px;
}
nav ul li {
float: left;
border: 1px solid #878e63;
width: 15%;
}
nav ul li a {
background-color: #f1f0d1;
display: block;
padding: 5% 12%;
font-weight: bold;
font-size: 18px;
color: #878e63;
text-decoration: none;
text-align: center;
}
nav ul li a:hover, nav ul li.active a {
background-color: #878e63;
color: #f1f0d1;
}
.banner img {
width: 100%;
border-top: 1px solid #878e63;
border-bottom: 1px solid #878e63;
}
.clearfix{
clear: both;
}
.left-col {
width: 55%;
float: left;
margin: 1% 1% 1%;
}
.sidebar: {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.therapy {
/*float: left;*/
margin: 0 auto;
width: 100%;
height: auto;
/*padding: 1%;*/
}
.section{
width: 29%;
float: left;
margin: 2% 2%;
text-align: center;
}
footer{
background-color: #878e63;
width: 100%;
overflow: hidden;
}
footer p, footer h3 {
color: #f1f0d1;
}
footer p a {
color: #f1f0d1;
text-decoration: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img {
height: 50px;
}
#media screen and (max-width: 480px) {
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav {
width: 100%;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li {
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878e63;
border-right: 0px solid #878e63;
border-bottom: 1px solid #878e63;
border-left: 0px solid #878e63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col, .sidebar, .section {
width: 100%;
float: left;
margin: 0;
}
}
</style>
</head>
<!-- redo all images on the page and style with css3-->
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <strong>727-555-5555</strong></p>
</div><!--end callout div-->
<header>
<!--need ne image--><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage" title="Massage by ?">
</header>
<nav>
<ul>
<li class="active">Home</li>
<!--make active later--><li>Contact</li>
<!--make active later--><li>Pricing</li>
<!--make active later--><li>Specials</li>
<!--make active later--><li>Consult</li>
<!--make active later--><li>Consult</li>
</ul>
<div class="clearfix"></div>
</nav>
<div class="banner">
<img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png" alt="need new" title="new">
</div><!--close banner-->
<!--fix w css--><center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png" alt="need new" title="new"></center>
<section class="left-col">
<!--use h2 tag and css--><p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque. Praesent blandit velit eu turpis aliquam pellentesque. Cras vel erat eget ligula sollicitudin commodo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at</p>
<p style="text-indent: 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie pellentesque at convallis eros. Ut luctus ex eget tempor scelerisque.</p>
</section>
<aside class="sidebar">
<div class="therapy">
<img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg" alt="need new" title="new">
</div><!--close therapy div-->
</aside>
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/private.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risus In non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<div class="section">
<h3>Text Text Text Text</h3>
<img src="http://www.w3newbie.com/wp-content/uploads/retreat.png" alt="need new" title="new">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non fringilla risusIn non fringilla risus. Quisque sollicitudin iaculis nunc, ultricies fringilla ex malesuada eu. Quisque a augue in mauris molestie</p>
</div><!--close section div-->
<!--fix w h2 and css --><center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png" alt="need new" title="new"></center>
<footer>
<div class="section">
<p>Text Text Text</p>
<p><strong>727-555-5555</strong><br>
123 Main St<br>
Anywhere, FL 33770<br>
blank#blahblah.com</p>
</div>
<div class="section">
<p>Connect with us!</p>
<ul>
<li><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt="need new" title="new"></li>
<li><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png" alt="need new" title="new"></li>
</ul>
</div>
<div class="section">
<img src="http://www.w3newbie.com/wp-content/uploads/plant.png" alt="need new" title="new">
</div>
</footer>
</div><!--end wrapper div-->
<p>© 2014.</p><!--margin 0 auto this-->
</body>
</html>
I know it is a lot, but I am stuck, I think my math is off. Please advise me how I can resolve and thank you.
I found a typo (an unecessary colon):
.sidebar: { /*here*/
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
If you want to improve the use of white space, you need to make a concept at first. For example your text is currently above a huge image. Unter this huge image there are three smaller boxes.
So you could say in full screen you want the image and text next to each other. This is done by adding the following to the media query you want the text and image to appear next to each other:
aside.sidebar {
width: 40%;
float: right;
margin-right: 2%;
margin-top: 30px;
}
Then you need to insert
<div style="clear: both;"></div>
Below the closing </aside> tag! You have inserted something like this for your sidebar in line 106 with .sidebar:, which is a "broken code" because of the : after your css class.
This is a quite simple example, but works for all kinds of pages. If you need further explanations feel free to ask, this is a "quick help" copy & paste solution.
Best regards,
Marian.