I am trying to add 2 images side by side in my header, following that I want my website title GARY MANN LLC and below that Residential Contractor, and then over on the right side of the header I want space to add social buttons/links. How can I divide the space up in the cleanest manner using just css and html heres what ive got to work with:
HTML:
<!DOCTYPE HTML>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>GARY MANN LLC</title>
<link rel="stylesheet" href="styles/gmann.css" type="text/css" />
</head>
<body>
<header>
<center>GARY MANN LLC</center>
<center>Residential Contractor</center>
</header>
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>Our Crew</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Services
<ul>
<li>Carpentry</li>
<li>Waterproofing</li>
<li>Concrete</li>
<li>Masonry</li>
<li>Property Maintenance</li>
<li>Metal Construction</li>
<li>Interior Design</li>
<li>Demo & Salvage</li>
</ul>
</li>
<li>Portfolio
</li>
<li>Contact
<ul>
<li>Via Email</li>
<li>Web Form</li>
<li>Carrier Pigeon</li>
</ul>
</li>
</ul>
</nav>
<div id="wrapper">
<section id="content">
<!-- all the content in here -->
</section>
<section id="left_side">
</section>
</div> <!-- end wrapper -->
<footer>
<div id="footer_center">
<section id="social_links">
<h3>Connect With Us</h3>
</section>
<section id="site_map">
<h3>Site Map</h3>
</section>
</div>
<div id="copy">
<p>Copywright</p>
</div>
</footer>
</body>
</html>
CSS:
/* HEADER */
* {
margin:0;
padding:0;
}
header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
/* END OF HEADER */
/* START NAV MENU */
nav {
background-color:#333333;
height:40px;
width:100%;
float:left;
position: relative;
}
nav ul {
font-family: Sonoma, Arial;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
position: relative;
float: left;
clear: left;
left: 50%;
}
nav ul li {
float: left;
position: relative;
display: block;
right:50%;
}
nav li ul {
display: none;
}
nav ul li a {
display: block;
text-decoration: none;
background: #666666;
color: #ffffff;
padding: 5px 20px 3px 15px;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
width:90px;
text-align:center;
border-right: 3px solid black;
border-left: 3px solid black;
border-top: 1px solid black;
}
nav ul li a:hover {
background: #999999;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {
float: none;
font-size: 11px;
}
nav li:hover a {
background: #534635;
height:30px; /* Height of lower-level nav items is shorter than main level */
}
nav li:hover li a:hover {
background: #999999;
}
nav ul li ul li a {
text-align:left;
}
/* END NAV MENU */
/* WRAPPER */
#wrapper {
width:100%;
height:600px;
background-color:#CCCCCC;
margin-left:auto;
margin-right:auto;
border-left:1px solid black;
border-right:1px solid black;
}
#content {
width:85%;
height:100%;
float:right;
background-color:#999999;
}
#left_side {
width:15%;
height:100%;
float:left;
background-color:#333333
}
/* END WRAPPER */
/* FOOTER */
footer {
width:100%;
height:170px;
background-color:#e7e7e7;
border-top:1px solid black;
}
#footer_center {
width:900px;
height:145px;
margin-left:auto;
margin-right:auto;
border-bottom:1px dotted #333;
}
#social_links {
width:435px;
height:100%;
float:left;
border-right:1px dotted #333;
}
#site_map {
width:435px;
height:100%;
float:right;
border-left:1px dotted #333;
}
/* END FOOTER */
You can achieve this by making classes.
.header{
width:100%;
height:20%;
float:left;
text-align:center
}
.logo{
width:80%;
height:100%;
}
.upperlogo{
background:url('path of the upper logo') 0 0 no-repeat;
height:10%;
width:100%;
}
.lowerlogo{
background:url('path of the lower logo') 0 0 no-repeat;
height:10%;
width:100%;
}
.social-icons{
width:20%;
height:100%;
float:right;
}
In your HTML:
<header class="header">
<div class="logo">
<div class="upperlogo"></div>
<div class="lowerlogo"></div>
</div>
<div class="social-icon">
....
</div>
</div>
Adjust the height & width to suit your images. Loading images through CSS is always the better-elegant way.
You need to add 2 images, some texts, and social networking buttons.
<header>
<img id="img1" src="" />
<img id="img2" src="" />
<div id="text">
<span id="title">GARY MANN LLC</span>
<span id="description">Residential Contractor</span>
</div>
<div id="social">
</div>
</header>
CSS:
header {
width:100%;
height:110px;
background-color:#FF6600;
border-bottom:2px solid black;
}
#img1
{
float:left;
width:100px;
height:100px;
}
#img2
{
float:left;
width:100px;
height:100px;
margin-left:5px; //If you want some space between them
}
#text
{
float:left;
margin-left:10px;
}
#title
{
font-weight:20px;
float:left;
}
#description
{
font-weight:10px;
float:left;
clear:both;
}
#social
{
float:right;
}
Check this http://jsfiddle.net/5KRbh/
There are several ways. If you cannot change the html, try the :before selector.
header {
position:relative;
background: url(image.gif) no-repeat top left;
padding-left:200px;
}
header:before {
content:url(image.gif);
top: 0;
left: 100px;
position: absolute;
z-index: -1;
}
Related
I am currently using ASP.NET to create a web form using HTML5 and CSS to style it. The code that I am using on the site.master for the navigation bar is as follows.
<body>
<header>
<div class="container">
<img src="TGASlogo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home Page</li>
<li>About</li>
<li>Contact</li>
<li>List1</li>
<li>List2</li>
<li>List3</li>
<li>List4</li>
<li>List5</li>
<li>Sign Up</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
<div>
</div>
</body>
and the style sheet is as follows.
body {
padding-left: 500px;
padding-right: 500px;
margin: 0;
background: #F0EFE8;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.container {
width:80%;
margin:0 auto;
}
header {
background: #FFD63C;
}
header::after {
content: '';
display:table;
clear:both;
}
.logo {
float:left;
padding:5px 0;
}
nav {
float:right;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav li {
display:inline-block;
margin-left:35px;
padding-top:35px;
position:relative;
}
nav a {
color:#444;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-weight:500;
}
nav a:hover {
color:#FFF;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #FFF;
position: absolute;
top: 0;
width: 0%;
transition:all ease-in-out 250ms;
}
nav a:hover::before{
width:100%;
}
I am unsure as to why my navigation bar has randomly been squished as shown in the screenshot provided. is there any way that I can make the navigation bar re-adjust in size as people change their browser window size?
This is a screenshot of how the nav bar looks
I'm editing custom css in my Cafepress store. I'm trying to get the store to display differently on mobile and desktop. Cafepress allows me to add to the head tag contents. The media queries at the bottom are what I've added:
<style>
body
{
background-color:#ffffff;
}
#cpWrapper{
padding:0;
background-image:url('http://i3.cpcache.com/image/110358274_400x400.png');
border-bottom: 1px solid #e14c3b;
width:100%;
max-width:1000px;
margin:auto;
}
#shopContainer{
width:96%;
max-width:960;
background-color:#ffffff;
margin:0px auto;
}
#shopBorder{
border:0;
background-color:#e14c3b;
border-top:0;
}
#shopWrapper{
width:94%;
max-width:940;
background-color:#ffffff;
border:0;
padding:20px;
}
#shopHeader{
background-color:#ffffff;
}
.bodyText a{
text-decoration:none;
}
.center
{
margin:auto;
width:50%;
}
.smallsidebartext a{
font-size: 12px;
text-decoration:none;
}
#sidebarContent {
padding: 85px 5px 5px;
position: relative;
}
#sidebarContent table {
width:auto;
}
#sidebarContentTD {
min-width:200px;
}
#shopCollection{
font-family:Georgia,"Times New Roman",Times,serif;
font-size:15px;
font-weight:bold;
font-color:#e14c3b;
left: 7px;
position: absolute;
top: 40px;
}
.promoBox{
margin-top:40px;
}
.sidebarbg {
background-color:#ffffff;
border-right: 1px dashed #e14c3b;
}
#shopName{
font-family:Georgia,Times,serif;
font-size:48px;
color:#e14c3b;
padding:10px 10px;
}
#colorBar{
height:16px;
}
#topNav{
background-color:#ffffff;
font-family:"times New Roman",Times,serif;
font-size:16px;
font-weight:bold;
color:#e14c3b;
text-align:center;
width:96%;
max-width:960px;
margin:auto auto 25px;
border-top: 1px solid #e14c3b;
border-bottom: 1px solid #e14c3b;
padding:0;
}
#topNav ul, #topNav ul li{
margin:0;
padding:0;
list-style:none;
float:left;
}
#topNav ul{
width:96%;
max-width:960px;
}
#topNav ul li a{
display:block;
padding:15px 10px;
line-height:100%;
color:#e14c3b;
text-decoration:none;
}
#searchFormContainer{
width:206px;
float:right;
left: -16px;
position: absolute;
top: 0;
}
#submitSearch{
float:right;
}
#searchTerm{
float:left;
width:125px;
height:16px;
padding:3px;
}
#media (max-width: 849px) {
.showOnDesktop {
display: none;
}}
#media (min-width: 849px) {
.showOnMobile {
display: none;
}}
</style>
Next it allows me to enter code for the header, which I've done as so:
<div class="showOnDesktop">
<div id="shopContainer">
<div id="shopHeader">
<div id="shopName"><a href="https://spaymart.org" rel="nofollow">
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner.png">
</a>
</div>
</div>
<div id="topNav">
<ul>
<li>Home</li>
<li><a href="http://www.cafepress.com/<cpstore:id>/s__t-
shirts-clothing">Shirts & Clothing</a></li>
<li>Everything Else
</li>
</ul>
</div>
<div id="shopWrapper">
<div class="showOnMobile">
<div id="shopContainer">
<div id="shopHeader">
<div id="shopName"><a href="https://spaymart.org" rel="nofollow">
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner-
MOBILE.png"></a>
</div>
</div>
<div id="topNav">
<ul>
<li>Home</li>
<li><a href="http://www.cafepress.com/<cpstore:id>/s__t-
shirts-clothing">Shirts & Clothing</a></li>
<li>Everything Else
</li>
</ul>
</div>
<div id="shopWrapper">
Finally, it allows me to add the footer code, which I've done like so:
</div><!-- closing shop wrapper -->
</div><!-- closing shop container -->
</div><!-- closing shop class --!>
<div class="clear"> </div>
The current output can be viewed here: http://www.cafepress.com/spaymart
The shop container, along with header and navigation, are displaying. Content/items contained within the shop wrapper are not.
Thank you in advance for any help you might be able to provide.
There are many problems in code, but the main reason is your mobile banner is nested inside of your desktop banner. When screen size is less than 849px, whole desktop container (with all nested elements) disappears.
Here you can grab a clean and workind code: CodePen for cafepress.com
<div class="showOnDesktop">
<div id="shopContainer">
<div id="shopHeader">
<div id="shopName">
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner.png">
</div>
</div>
<div id="topNav">
<ul>
<li>Home</li>
<li>Shirts & Clothing</li>
<li>Everything Else</li>
</ul>
</div>
<div id="shopWrapper"></div>
</div>
</div>
<div class="showOnMobile">
<div id="shopContainer">
<div id="shopHeader">
<div id="shopName">
<img src="https://spaymart.org/wp-content/uploads/2017/10/Shop-Banner-MOBILE.png">
</div>
</div>
<div id="topNav">
<ul>
<li>Home</li>
<li>Shirts & Clothing</li>
<li>Everything Else</li>
</ul>
</div>
</div>
</div>
<div id="shopWrapper"></div>
And CSS:
body {
background-color:#ffffff;
}
#cpWrapper {
padding:0;
background-image:url('http://i3.cpcache.com/image/110358274_400x400.png');
border-bottom: 1px solid #e14c3b;
width:100%;
max-width:1000px;
margin:auto;
}
#shopContainer {
width:96%;
max-width:960;
background-color:#ffffff;
margin:0px auto;
}
#shopBorder {
border:0;
background-color:#e14c3b;
border-top:0;
}
#shopWrapper {
width:94%;
max-width:940;
background-color:#ffffff;
border:0;
padding:20px;
}
#shopHeader {
background-color:#ffffff;
}
.bodyText a {
text-decoration:none;
}
.center {
margin:auto;
width:50%;
}
.smallsidebartext a {
font-size: 12px;
text-decoration:none;
}
#sidebarContent {
padding: 85px 5px 5px 5px; // add last padding 5px
position: relative;
}
#sidebarContent table {
width: auto;
}
#sidebarContentTD {
min-width:200px;
}
#shopCollection {
font-family:Georgia,"Times New Roman",Times,serif;
font-size:15px;
font-weight:bold;
font-color:#e14c3b;
left: 7px;
position: absolute;
top: 40px;
}
.promoBox {
margin-top:40px;
}
.sidebarbg {
background-color:#ffffff;
border-right: 1px dashed #e14c3b;
}
#shopName {
font-family:Georgia,Times,serif;
font-size:48px;
color:#e14c3b;
padding:10px 10px;
}
#colorBar {
height:16px;
}
#topNav {
background-color:#ffffff;
font-family:"times New Roman",Times,serif;
font-size:16px;
font-weight:bold;
color:#e14c3b;
text-align:center;
width:96%;
max-width:960px;
margin:auto auto 25px;
border-top: 1px solid #e14c3b;
border-bottom: 1px solid #e14c3b;
padding:0;
}
#topNav ul, #topNav ul li {
margin:0;
padding:0;
list-style:none;
float:left;
}
#topNav ul {
width:96%;
max-width:960px;
}
#topNav ul li a {
display:block;
padding:15px 10px;
line-height:100%;
color:#e14c3b;
text-decoration:none;
}
#searchFormContainer {
width:206px;
float:right;
left: -16px;
position: absolute;
top: 0;
}
#submitSearch {
float:right;
}
#searchTerm {
float:left;
width:125px;
height:16px;
padding:3px;
}
#media screen and (max-width: 849px) {
.showOnDesktop {
display: none;
}
}
#media screen and (min-width: 850px) {
.showOnMobile {
display: none;
}
}
I'm having trouble putting a sticky footer onto a site I'm working on.
I've tried everything and can't think of what the problem could be.If someone could take a look at the coding id appreciate it.
As some content on the site is only going to be small paragraphs i need a sticky footer to stick to the bottom to stop it floating in the middle of the site.
I have the content in a div that over laps a image and id like the footer to float on the bottom. however when i close the divs i can't get the footer to stay at the bottom, it starts floating under the image banner. Ive tried position:fixed; but i don't want that as it overlaps the content. Thanks
HTML
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Linear Partners</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta name="viewport" content="initial-scale=1, maximum-scale=2" />
<link href="style1.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script type='text/javascript' src='js/main.js'></script>
<script>
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#menu').toggleClass('open');
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="mainpage">
<div id="header">
<img src="images/Linear.Partners.Logo.png" width ="173" height="65" alt="logo">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link" href="#"><img src="images/3lines.png" width ="31" height="25"></a>
<ul class="simple-toggle" id="menu">
<li>Home</li>
<li>About
<ul>
<li>Team</li>
</ul>
</li>
<li>Expertise</li>
<li>Research</li>
<li>Best Practice</li>
<li>Join Our Team</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="bg-image"style="background-image:url(images/slide1.jpg); background-position:50% 50%;">
<div id="main" class="wrapper clearfix">
<left>
<h1>Privacy Policy</h1>
<p>Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</p>
</left>
<right>
<h1>Privacy Policy</h1>
Linear Partners are required by law to comply with the UK and European Data Protection legislation. We are committed to ensuring that all employees comply with the Acts in order to maintain the confidentiality of personal data.</right>
</div>
</div>
<div class="clear"></div>
<footer>
<div id="footer-wrapper">
<div id="footer-content">
<div class="Copyright">
Copyright © 2014 Linear Partners. All rights reserved.
</div>
<div class="footer-nav">
Home Privacy Diversity Policy
</div>
</div>
</div>
</footer>
<!-- #end footer area -->
</body>
</html>
CSS
html, body {
height: 100%; margin: 0; padding: 0;
}
body
{
margin:0;
padding:0;
background: #fff;
font: 13px'helvetica', ariel, sans-serif;
color: #000;
}
/*Header*/
#header
{
position:relative;
width:autopx;
max-width:950px;
height:65px;
margin: 0 auto;
z-index:10000;
background: #fff;
padding:20px;
}
#wrap {min-height: 100%;}
#mainpage {
padding-bottom: 85px;} /* must be same height as the footer */
.footer {position: relative;
margin-top: -85px; /* negative value of footer height */
height: 85px;
clear:both;}
/* nav */
.nav
{
width:autopx;
float:right;
padding-top:22px;
}
ul.simple-toggle
{
list-style:none;
padding: 0px;
margin: 0px;
text-align: center;
}
ul.simple-toggle li {
display: inline-block;
text-align: center;
border-right: 1px solid #cfcfcf;
}
ul.simple-toggle li:last-child
{
border-right: none;
}
ul.simple-toggle li a
{
display: block;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color:#000;
text-decoration:none;
}
.anchor-link
{
display: none;
background-color: #16447b;
margin-top: -10px;
float: right;
height:40px;
width:40px;
}
.anchor-link img
{
margin:9px 6px 0px 4px ;
}
#mobile-nav
{
display:none;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
nav ul
{
list-style: none;
position: relative;
display: inline-table;
}
nav ul li:hover
{
background: #16447b;
color: #fff;
}
nav ul li:hover a
{
color: #fff;
}
nav ul ul
{
background: #092a55; padding:0px; margin:0px;
position: inherit; top: 100%;
}
nav ul ul:hover a
{
background: #6689b3;
}
/*wrapper*/
#bg-image {
z-index:-5780000;
float: left;
width: 100%;
height:250px;
background-size:cover;
margin-top:2px;
border: 2px solid #16447b;
border-width: 2px 0;
border-color: #fff;
box-shadow: 0 2px 0px #16447b, 0 -2px 0px #16447b;
}
.wrapper
{
width:90%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:150px;
}
#main left{
background-color: #fff;
width: 62.5%;
float: left;
}
#main right
{
background-color:#fff;
width: 35%;
float: right;
}
/*Footer*/
#footer-wrapper
{
height:65px;
margin: 0 auto;
background: #000;
padding:20px;
}
#footer-content
{
height:65px;
max-height:120px;
position:relative;
width:100%;
max-width:950px;
margin: 0 auto;
margin-top:20px;
color: #fff;
}
.Copyright
{
margin-top:5px;
float:left;
color: #fff;
text-decoration:none;
}
.footer-nav
{
margin-top:5px;
float:right;
color: #fff;
text-decoration:none;
margin-right:-6px;
}
.footer-nav a
{
color: #fff;
padding-left:6px;
padding-right:5px;
border-right: 1px solid #fff;
text-decoration:none;
float: left;
}
.footer-nav a:last-child
{
border:none;
}
.footer-nav a:hover
{
text-decoration:underline;
}
.clear {
clear:both;
}
/*media*/
#media (max-width:750px){
ul.simple-toggle
{
display: none;
}
.anchor-link, #mobile-nav
{
display: block;
}
ul.open
{
background-color: #16447b;
display: block;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
right: 20px;
top: 100%;
width: 175px;
z-index: 50000;
opacity:0.90;
}
ul.open ul
{
background-color: #092a55;
display: none;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
top: 100%;
width: 175px;
z-index: 50000;
}
ul.open li
{
display: block;
list-style: none;
text-align: center;
border: none;
}
ul.open li a
{
display: block;
padding: 10px 5px;
border-bottom: 0px solid #5578a4;
color: #fff;
}
ul.open li a:hover
{
background-color: #375d8f;
color: #fff;
}
.wrapper
{
width:85%;
max-width: 910px;
margin: auto;
margin-top:125px;
padding:20px;
background: #fff;
height:250px;
}
#main left{
background:#fff;
width: 62.5%;
float: left;
}
#main right
{
background:#fff;
width: 35%;
float: right;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
#media (max-width:480px){
img[src*="images/Linear.Partners.Logo.png"]
{
margin-top:13px;
height:40px;
width:106px;
}
.bg-image {
float: left;
width: 100%;
height:150px;
background-size:cover;
}
.wrapper{
width:80%;
height:200px;
margin-top:75px;
}
#main right
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
#main left
{
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
.Copyright
{
position:absolute;
left:0px;
top:-10px;
font: 11px'helvetica', ariel, sans-serif;
}
.footer-nav
{
position:absolute;
left:-6px;
top:10px;
font: 11px'helvetica', ariel, sans-serif;
}
}
To avoid the footer to overlap the content add a margin to the content corresponding to the footer's height
.footer-nav{
//...
position:fixed;
bottom;0;
height:50px; // just an example
//...
}
.wrap{
margin-bottom:50px;// same as .footer-nav height
}
FIDDLE
Try this for footer div:-
#footer-wrapper {
background: none repeat scroll 0 0 #000000;
height: 65px;
margin: 0 auto;
padding: 20px;
bottom: 0;/*add from here*/
left: 0;
position: fixed;
width: 100%;/*to here*/
}
Check out this code
it may help youjust wirte the footer tag inside the wrap div
<div id="wrap"> <footer></footer> </div>
It seems that everything alright but you missed somewhere 2 closing DIVs.
Try to add them before
<div class="clear"></div>
http://jsfiddle.net/wF9UL/
I'm trying to implement a CSS dropdown menu but whenever I do so, the <h1> and <p> tags wrap around the drop down menu boxes.
Can anyone suggest a solution to this? I'm only just learning CSS now and would appreciate any input.
Thanks
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id= "container">
<img src="images/title.jpg"/>
<div id="navigation">
<ul class="navbar">
<li>
Home
</li>
<li>
HTML5
<ul>
<li>
Tutorial 1
</li>
<li>
Tutorial 2
</li>
<li>
Tutorial 3
</li>
</ul>
</li>
<li>
CSS3
<ul>
<li>
Tutorial 1
</li>
<li>
Tutorial 2
</li>
<li>
Tutorial 3
</li>
</ul>
</li>
<li>
Links
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="content">
<h2>Home Page</h2>
<p>This is a test paragraph. This is a test paragraph. This is a test paragraph.
This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.</p>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
and the CSS is:
#charset "utf-8";
/* CSS Document */
#container{
width:800px;
background-color:#00FF00;
border:1px solid black;
height:1000px;
z-index:-9;
margin:auto;
}
#logo{
background-color:#FF0033;
border:#000 1px;
width:800px;
height:200px;
overflow:hidden;
}
#navigation{
background-color:#FFF;
border:#000 1px;
width:800px;
height:30px;
}
#content{
background-color:#6F3;
border:#000 1px;
width:780px;
height:400px;
margin:10px;
}
#footer{
background-color:#FF0;
border:#000 1px;
width:800px;
height:100px;
}
.navbar {
/*border-right: 1px solid #54879D;*/
height: 40px;
margin: 0 0 0 0;
padding: 0;
}
.navbar li {
background-color: #366B82;
float: left;
font: bold 12px/1.2em Arial,Verdana,Helvetica;
height: auto;
list-style: none outside none;
margin: 20 0;
padding: 0;
text-align: center;
width: 160px;
}
.navbar a {
/* border-left: 1px solid #54879D;*/
border-right: 1px solid #1F5065;
color: #FFFFFF;
display: block;
padding: 10px 10px;
text-decoration: none;
}
.navbar li:hover, a:hover {
background-color: #54879D;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879D;
}
.navbar li ul li a {
border-color: #74A3B7 #1F5065 #1F5065;
border-left: 1px solid #1F5065;
border-right: 1px solid #1F5065;
border-style: solid;
border-width: 1px;
}
.navbar li ul li a:hover {
background-color: #366B82;
}
update these classes:
working DEMO
.navbar li ul li {
background-color: #54879D;
float:none; /*added*/
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
position:absolute; /*added*/
}
I have 4 divs in my HTML, I'd love to stay the same this appearance: (Each color a div, totaling 4 (not counting the background color))
For the current scenario:
I have the following jsFiddle: HERE
My big problem is when I add another item <li> in my <ul>, the result is that I have the following:
Css with the way they are one overlaps the other :'( (crying)
body {
background-image:url('http://subtlepatterns.com/patterns/shattered.png');
margin:0;
}
.chatBody {
position:absolute;
bottom:0;
height:200px;
width:100%;
background-color:#3c454f;
border-top: 10px solid #7ac943;
}
#navlist li {
display: inline;
list-style-type: none;
width:300px;
}
.avatarUser {
height:80px;
width:80px;
background-color:yellow;
float:left;
margin-right:20px;
margin-bottom:20px;
}
li > .frdImage {
position: relative;
/*margin-top:-25px;*/
top:50%;
float:left;
margin-left:5px;
border-radius: 6px;
border: solid 2px #aaa;
height:80px;
width:80px;
background-color:yellow;
margin-right:10px;
margin-bottom:20px;
}
li > span.frdName {
position:absolute;
float:left;
margin-top:10px;
font-weight: bold;
font-family:'Verdana', cursive;
font-size: 15px;
color: white;
margin-right:200px;
}
.active{
width:300px;
}
.frdStatusIndicator{
float:left;
margin-top:40px;
height:15px;
width:15px;
background-color: #7ac943;
border-radius: 10px;
}
.frdStatusName{
float:left;
margin-top:40px;
border-radius: 10px;
font-family:'Verdana', cursive;
font-size: 15px;
color: white;
line-height:15px;
padding-left:5px;
}
Could someone kindly help me with this? Since already very grateful for the time you guys!
How about this for html
<div class="chatBody">
<div id="navlist">
<div class="tile active">
<div class="frdImage"></div>
<div class="stuff">
<div class="frdName">Igor Gomes</div>
<div class="frdStatusIndicator online"></div>
<div class="frdStatusName">Online</div>
</div>
</div>
<div class="tile active">
<div class="frdImage"></div>
<div class="stuff">
<div class="frdName">Igor Gomes the second</div>
<div class="frdStatusIndicator idle"></div>
<div class="frdStatusName">Idle</div>
</div>
</div>
<div class="tile active">
<div class="frdImage"></div>
<div class="stuff">
<div class="frdName">Igor Gomes the third</div>
<div class="frdStatusIndicator online"></div>
<div class="frdStatusName">Online</div>
</div>
</div>
<div class="tile active">
<div class="frdImage"></div>
<div class="stuff">
<div class="frdName">Igor Gomes the fourth</div>
<div class="frdStatusIndicator offline"></div>
<div class="frdStatusName">Offline</div>
</div>
</div>
<div class="tile active">
<div class="frdImage"></div>
<div class="stuff">
<div class="frdName">Igor Gomes the fifth</div>
<div class="frdStatusIndicator idle"></div>
<div class="frdStatusName">Idle</div>
</div>
</div>
</div>
</div>
and this for css:
body {
background-color: #3c454f;
}
#navlist > div.tile {
display: inline-block;
width:300px;
border: solid 1px red;
position: relative;
}
.avatarUser {
height:80px;
width:80px;
background-color:yellow;
float:left;
margin-right:20px;
margin-bottom:20px;
}
div.tile > .frdImage {
border-radius: 6px;
border: solid 2px #aaa;
height:80px;
width:80px;
background-color:yellow;
display: inline-block;
}
div.tile > div.stuff > div.frdName {
position:relative;
display: inline-block;
right: 0px;
margin-top:10px;
font-weight: bold;
font-family:'Verdana', cursive;
font-size: 15px;
color: white;
width: 200px;
}
.active{
width:300px;
}
div.tile > div.stuff {
position: relative;
top: -2em;
width: 208px;
/* border: solid 1px green; */
display: inline-block;
}
.frdStatusIndicator{
position: relative;
height:15px;
width:15px;
background-color: #7ac943;
border-radius: 10px;
display: inline-block;
}
.frdStatusName{
position: relative;
border-radius: 10px;
font-family:'Verdana', cursive;
font-size: 15px;
color: white;
line-height:15px;
padding-left:5px;
display: inline-block;
}
.offline {
background-color: #FF0000;
}
.online {
background-color: #00FF00;
}
.idle {
background-color: #FFFF00;
}
I suppose I have to do a jsfiddle for this ... http://jsfiddle.net/bbutler/TMgs5/1/
Try setting width to this div in the list i.e for eg:100px and try it wont overlap
<div style="display:inline; float:left;width:100px">
Thanks
AB
Just make your window bigger in JSFiddle.
Just check out the jsfiddle below. You were pretty much on the right track.
http://jsfiddle.net/TYZ64/4/
#navitem li
{
display:inline-block;
}
I just changed that part.