Hi first of all thanks to all and thanks to stackoverflow i am new for html and css i downloaded free website template from internet i want to editing i did something, when i removing upper div class footer background shrink from full width to main width and some of changes also happening in footer.
![BEFORE EDITING TEMPLATE][1]
HTML OF BEFORE EDITING
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wood Working Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> View Details </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img src="images/living-room.jpg" alt="Img">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img src="images/bedroom.jpg" alt="Img">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img src="images/kitchen.jpg" alt="Img">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
<h4>From the Blog</h4>
<div>
<img src="images/carving-small.png" alt="Img"> <span>April 16, 2023</span>
<p>
CC's Carving
</p>
Read More
</div>
<div>
<img src="images/resort-small.png" alt="Img"> <span>April 15, 2023</span>
<p>
5 Star Resorts
</p>
Read More
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img src="images/show-room.png" alt="Img">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form action="#" method="post" id="newsletter">
<h4>Join Our Newsletter</h4>
<input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
<input type="submit" value="Sign up" class="btn2" />
</form>
<div id="connect">
<h4>Social Media</h4>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
In this when i edited in i mean when i remove following one footer background is shrinking from normal size.
<h4>From the Blog</h4>
<div>
<img src="images/carving-small.png" alt="Img"> <span>April 16, 2023</span>
<p>
CC's Carving
</p>
Read More
</div>
<div>
<img src="images/resort-small.png" alt="Img"> <span>April 15, 2023</span>
<p>
5 Star Resorts
</p>
Read More
</div>
</div>
</div>
</div>
after edit footer is shrink from before one
![AFTER EDIT OF HTML ][2]
HTML AFTER EDITED
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wood Working Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> View Details </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img src="images/living-room.jpg" alt="Img">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img src="images/bedroom.jpg" alt="Img">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img src="images/kitchen.jpg" alt="Img">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img src="images/show-room.png" alt="Img">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form action="#" method="post" id="newsletter">
<h4>Join Our Newsletter</h4>
<input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
<input type="submit" value="Sign up" class="btn2" />
</form>
<div id="connect">
<h4>Social Media</h4>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
please help as soon as possible...
I guess you removed too many closing div tag.
Maybe this is what you want :
("From the Blog" portion removed)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wood Working Website Template</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
<div>
<div id="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> View Details </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img src="images/living-room.jpg" alt="Img">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img src="images/bedroom.jpg" alt="Img">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img src="images/kitchen.jpg" alt="Img">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img src="images/show-room.png" alt="Img">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form action="#" method="post" id="newsletter">
<h4>Join Our Newsletter</h4>
<input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
<input type="submit" value="Sign up" class="btn2" />
</form>
<div id="connect">
<h4>Social Media</h4>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
Replace your <body> tag with this
Updated Body Content
<body>
<div id="header">
<div>
<div id="logo">
<img alt="LOGO" src="images/logo.png">
</div>
<ul id="navigation">
<li class="selected">
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
<div id="contents">
<div>
<div class="body">
<div id="adbox">
<img alt="Img" src="images/chair.jpg"> <span class="info"> Whicker Chair <em>$250.00</em> <a class="btn1" href="index.html">View Details</a> </span>
<div class="details">
<h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
<p>
You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
</p>
</div>
</div>
<ul id="featured">
<li>
<div>
<img alt="Img" src="images/living-room.jpg">
</div>
<div class="details">
<h4>Living Room</h4>
<p>
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text.
</p>
</div>
</li>
<li class="bedroom">
<div>
<img alt="Img" src="images/bedroom.jpg">
</div>
<div class="details">
<h4>Bedroom</h4>
<p>
You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
</p>
</div>
</li>
<li class="kitchen">
<div>
<img alt="Img" src="images/kitchen.jpg">
</div>
<div class="details">
<h4>Kitchen</h4>
<p>
If you're having problems editing this website template, then don't hesitate to ask for help on the Forum.
</p>
</div>
</li>
</ul>
<div class="contact">
<p>
For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
</p>
</div>
<div class="blog">
<h4>From the Blog</h4>
<div>
<img alt="Img" src="images/carving-small.png"> <span>April 16, 2023</span>
<p>
CC's Carving
</p>
<a class="more" href="blog.html">Read More</a>
</div>
<div>
<img alt="Img" src="images/resort-small.png"> <span>April 15, 2023</span>
<p>
5 Star Resorts
</p>
<a class="more" href="blog.html">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<h4>Visit our Showroom</h4>
<img alt="Img" src="images/show-room.png">
<p>
4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> info#carvedcreations.com
</p>
</div>
<div>
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li>
<span class="time">Apr 16</span>
<p>
The Carving Master & Owner Maybe you’re looking for something diferent, something special.
</p>
</li>
<li>
<span class="time">Apr 15</span>
<p>
5 Star Hotels We Supply And we love the challenge of doing something diferent and something special.
</p>
</li>
<li>
<span class="time">Apr 14</span>
<p>
How To Pick The Right Furniture For You What’s more, they’re absolutely free! You can do a lot with them.
</p>
</li>
</ul>
</div>
<div>
<form id="newsletter" method="post" action="#">
<h4>Join Our Newsletter</h4>
<input type="text" onfocus="javascript:if(this.value==this.defaultValue){this.value='';}" onblur="javascript:if(this.value==''){this.value=this.defaultValue;}" value="Enter Email Address Here For Updates">
<input type="submit" class="btn2" value="Sign up">
</form>
<div id="connect">
<h4>Social Media</h4>
<a class="facebook" target="_blank" href="http://freewebsitetemplates.com/go/facebook/"></a> <a class="googleplus" target="_blank" href="http://freewebsitetemplates.com/go/googleplus/"></a> <a class="twitter" target="_blank" href="http://freewebsitetemplates.com/go/twitter/"></a>
</div>
</div>
</div>
<ul class="navigation">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
<p id="footnote">
© Copyright 2023. All Rights Reserved.
</p>
</div>
</div>
</body>
You removed some divs which made the layout change.
Try closing the divs just after
<div class="blog"></div>
Add 3 closing
</div>
Related
I want to make a more compact , but the compact attribute doesn't work in the structure I am using.
Can someone help me lessen the vertical "margin" of each li?
Code Snippet
<main id="main-canvas" style="padding-left: 120px">
<div class="row">
<div class="row" style="width:100%">
<div class="col-9" style="padding-left:0px">
<div class="row">
<ul style="padding-left:25px" compact>
<li><b class="content">123: </b>
<p class="secondary-content">Lorem</p>
</li>
<li><b class="content">456</b>
<p class="secondary-content"> ipsum dolor sit</p>
</li>
<li><b class="content">789</b>
<p class="secondary-content">amet consecituir or something like that I don't know I don't care</p>
</li>
</ul>
</div>
<div class="row">
<h3>Some stuff</h3>
</div>
<p class="secondary-content">Some secondary content</p>
</div>
<div class="col-3">
<div class="row">
<h3 id="sidemenu-h">sidemenu</h3>
</div>
</div>
</div>
</div>
</main>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
All right, no one wants to answer so I will do it.
Both #Yogi and #jme11 were right - removing the margin on <p> tag coupled with setting the line-height on the ul while removing the compact attribute did the trick.
The final html:
<ul style="padding-left:25px; line-height:18px">
<li><b class="content">123: </b>
<p class="secondary-content" style="margin-bottom:0px">Lorem</p>
</li>
<li><b class="content">456</b>
<p class="secondary-content" style="margin-bottom:0px"> ipsum dolor sit</p>
</li>
<li><b class="content">789</b>
<p class="secondary-content" style="margin-bottom:0px">amet consecituir or something like that I don't know I don't care</p>
</li>
</ul>
So I was learning to make a web page using HTML and CSS only.. lss, I can't put the footer under the content somehow. I'm supposed to separate every block from the header, content, and footer. but the footer stays inside the content or is blended with the content.
<header>
<ul class="Tabbar">
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
<li>About</li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_beginner.jpeg" alt="Beginner Cardio" class="gambar1">
<a href="detailbeginnercardio.html">
<div class="desc">
<div class="text">Beginner Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Pullup_1.jpeg" alt="Pull up" class="gambar1">
<a href="detailpullup.html">
<div class="desc">
<div class="text">Pull Up</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_beginner.jpeg" alt="Beginner Yoga" class="gambar1">
<a href="detailyogabeginner.html">
<div class="desc">
<div class="text">Yoga for Beginners</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Cardio_intermediate.jpeg" alt="Intermediate Cardio" class="gambar1">
<a href="detailintercardio.html">
<div class="desc">
<div class="text">Intermediate Cardio</div>
</div>
</a>
</div>
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>
I tried on putting it on a different block, and tried to give margins and padding but every time I resize the page the footer moved to the side of the content.
Maybe change the "content" to "main" or "article" or something else. "Content" is not recommended to use. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content
In my case, my home page only consists of a menu and closed accordions, each href in the menu when clicked on, opens a specific accordion & this works good.
My question is, if I have the same menu in other pages, not the home page, how can I let it hyperlinks to the home page & opens the specific accordion? They told me it can be done using Local Storage, but I don't know how to use it, any help please?
JQUERY CODE
$(document).ready(function () {
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
let click_state = localStorage.getItem("click_state");
let ind = localStorage.getItem("ind");
if (click_state == 1) {
$(".expand").eq(ind).trigger("click");
localStorage.removeItem("click_state");
localStorage.removeItem("ind");
} else {
}
$(".accord").each(function (index) {
$(this).click(function (event) {
event.preventDefault();
localStorage.setItem("click_state", 1);
localStorage.setItem("ind", index);
});
});
});
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>
I have two <div>s surrounding an image in same row, but when I add the image the right <div> drops below.
I've tried float, display:inline-block and even styling the HTMLtags, but it didn't help.
Please help me out.
Here's my code:
<title>Hair by Michelle</title>
<body>
<div class="all">
<div class="navbar">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
<div class="container">
<div class="hours">
<h1>Hours</h1>
<p>Tuesday: 12pm-7pm</p>
</br>
<p>Wednesday: 12pm-7pm</p>
</br>
<p>Thursday: 10am-7pm</p>
</br>
<p>Every other Saturday: 10am-7pm</p>
</div>
<div class="services">
<h1>Services</h1>
<h4>Women's Haircut $32</h4>
</br>
<h4>Men's Haircut $22</h4>
</br>
<h4>Full head color $50</h4>
</br>
<h4>Full highlights $70</h4>
</br>
<h4>Color toning $15</h4>
</br>
<h4>Facial waxing $12</h4>
</div>
</div>
Ignore the result area, just paste it in an editor.
if you want elements to line up in the same line should add:
float:left;
position:relative;
for the HTML I would recommend each image in a div:
.imgrow {
width:100px;
height:100px;
position:relative;
float:left;
}
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
I see just one image in your code...
If you need the text to be displayed next to the image, try this-
<div class="navbar">
<div style="float:left;">
<img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
<h1>Hair By Michelle</h1>
<ul>
<li class="home">home
</li>
<li class="about">about
</li>
<li class="availability">appointments
</li>
<li class="contact">contact
</li>
</ul>
</div>
</div>
Two bullet points are flowing onto a second line needlessly.
"2 Users Free For Life" and "Up to 5 databases, including a Demo Database" both go into a second line which looks ugly and means the final bullet point almost sites on the "Show me the features" button.
You can visit the site at: http://www.workbooks.com/workbooks-instant-access
See:
The code is as follows:
<div id="pricing-list">
<div class="pricing-item" id="free-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Free Edition</h3>
<p class="desc-1">Get started right away with our free edition.</p>
<p class="desc-2">Free for up to 2 users</p>
</div>
<div class="right-part">
<div class="l-col">
<ul class="features-list">
<li>
Community Support Only</li>
<li>
Sales, Marketing and Support</li>
<li>
Quotes, Orders and Invoices</li>
</ul>
<p><a class="do-btn" href="/sign-up/workbooks-free-edition">Sign up to the FREE Edition</a></p>
</div>
<div class="r-col">
<ul class="features-list">
<li>
1 Database Only</li>
<li>
2 Users Free for Life</li>
<li>
Storage Limit</li>
</ul>
<br />
<br />
<a class="do-btn" href="/pricing">Show me the features</a></div>
</div>
<div class="h-line at-bottom">
</div>
</div>
<div class="pricing-item" id="trial-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
30 Day Free Trial</h3>
<p class="desc-1">Access all features for 30 days. Unlimited users.</p>
<p class="desc-2">Full Feature Trial</p>
</div>
<div class="right-part">
<div class="l-col">
<ul class="features-list">
<li>
Sales, Marketing and Support</li>
<li>
Quotes, Orders and Invoices</li>
<li>
Multi Currency</li>
</ul>
<a class="do-btn" href="/sign-up/workbooks-trial-edition">Trial the Business Edition</a></div>
<div class="r-col">
<ul class="features-list">
<li>
Telephone & Community Support</li>
<li>
Up to 5 databases, including a Demo Database</li>
<li>
Advanced Security</li>
</ul>
<br />
<a class="do-btn" href="/pricing">Show me the features</a></div>
</div>
<div class="h-line at-bottom">
</div>
</div>
<div class="pricing-item" id="instant-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Instant Access</h3>
<p class="desc-1">Jump straight into our demo system</p>
</div>
<div class="right-part">
<div class="instant-access-bg">
<div class="l-col">
<ul class="features-list">
<li>
Log straight into a Demo System</li>
<li>
Get an instant feel for Workbooks</li>
</ul>
<a class="do-btn" href="http://content.workbooks.com/workbooks-instant-access">Access the demo instantly</a></div>
</div>
</div>
</div>
<div class="pricing-item" id="adv-item">
<div class="h-line at-top">
</div>
<div class="left-part">
<h3>
Speak to an advisor</h3>
<p class="desc-1">Speak right now to someone who can help</p>
</div>
<div class="right-part">
<div class="speak-to-an-advisor-bg">
<div class="l-col">
<ul class="features-list">
<li>
Ask any questions you have</li>
<li>
Find out which edition is right for you</li>
</ul>
<a class="do-btn" href="https://server.iad.liveperson.net/hc/31900811/?cmd=file&file=visitorWantsToChat&site=31900811&byhref=1" onclick="javascript:window.open('https://server.iad.liveperson.net/hc/31900811/?cmd=file&file=visitorWantsToChat&site=31900811&byhref=1','new_win','width=484,height=361');return false;" target="_blank">Start Online Chat</a></div>
</div>
</div>
<div class="h-line at-bottom">
</div>
</div>
</div>
<p> </p>
Anyone know what's going on?
You can fix this by adding white-space: nowrap; to .pricing-item .features-list li css class.