I have an issue whereby my div .gridContainer (black background) is not expanding with the body div but is for the footer. From what I can tell it should just be a simple fix using clear:both; in css3 on an empty div.
...however this doesn't seem to work! I've had a play around but can't seem to figure the issue out any chance somebody could clue me in as to whats happening here? (using chrome).
<body>
<div class="gridContainer clearfix">
<div id="navigation">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>VIDEOS</li>
<li>PHOTOGRAPHY</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="body">
<div id="CALogo"><img src="Images/CALogoLarge.png" alt="CreativeAbyss"></div>
</div>
<div id="footer">
<div id="FooterLeft">©2014 Creative Abyss. All Rights Reserved.</div>
<div id="FooterRight">Social Icons Here </div>
<div id="test"></div>
</div>
<div id="test"></div>
</div>
</body>
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
height: 100%;
}
#navigation {
float: left;
margin-left: 0;
width: 100%;
display: block;
height: auto;
padding-top:20px;
font-family: 'Open Sans', sans-serif;
font-size:13px;
font-weight:200;
}
ul li {
display: inline;
list-style-type: none;
margin-left: 35px;
marginright: 4px;
float:right;
color:#FFF;
}
ul a {
text-decoration: none; /* no underline */
color:#FFF;
}
ul a:hover{
text-decoration:underline; /* no underline */
color:#FFF;
}
#body {
margin-left: 0;
width: 100%;
display: block;
height: 50px;
clear:both;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
padding-bottom:10px;
}
#FooterLeft {
clear: both;
float: left;
margin-left: 0;
width: 48.9795%;
display: block;
font-family: 'Source Sans Pro', sans-serif;
font-weight:200;
color:#FFF;
}
#FooterRight {
clear: none;
float: left;
margin-left: 2.0408%;
width: 48.9795%;
display: block;
}
#test{
clear:both;
height:1px;
}
#CALogo {
background-color:#039;
}
}
So for anyone interested I figured out what was going on... I was foolishly using the id of "body" which obviously already exists and was being toyed around with in the boiler plate... embarrassing.
Related
I'm trying to say "my website bby" right next to the image logo and for some reason it displays under the logo. Help me please. Here is what it is right now, check the image
Here is my html:
body {
font-size:20px;
font-family: Optima, sans-serif;
line-height:1.5;
padding: 0;
margin:0;
}
.container {
width:80%;
overflow:hidden;
}
header {
font-family: Monaco, sans-serif;
color:white;
padding-top:100px;
min-width: 90%;
min-height: 200px;
margin: 0;
padding: 10px;
background:#6BD326;
}
#logo {
float:left;
display:inline-block;
}
.branding {
float: left;
}
nav li {
float:left;
padding: 0px 20px;
list-style-type: none;
}
nav {
float:right;
}
#logo {
margin-top:5px;
width:40%;
}
<header>
<div class="branding">
<div id="logo">
<img src="https://picsum.photos/200/300" style="width:100px;" />
</div>
<span><h1><u>My</u> Website bby</h1></span>
</div>
<nav>
<ul>
<li>Home</li>
<li>Photogallery</li>
<li>Contact me</li>
</ul>
</nav>
</header>
To have a better understanding of what I'm talking about, check the picture above. I just started out coding, really need to understand what's wrong.
You can also use a combination of display: inline-block and vertical-align: middle.
For example:
body {
font-size: 20px;
font-family: Optima, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
.container {
width: 80%;
overflow: hidden;
}
header {
font-family: Monaco, sans-serif;
color: white;
padding-top: 100px;
min-width: 90%;
min-height: 200px;
margin: 0;
padding: 10px;
background: #6BD326;
}
#logo {
float: left;
display: inline-block;
vertical-align: top;
}
.i-b {
display: inline-block;
vertical-align: top;
width: calc(100% - 40%);
}
.branding {
float: left;
}
nav li {
float: left;
padding: 0px 20px;
list-style-type: none;
}
nav {
float: right;
}
#logo {
margin-top: 5px;
width: 40%;
}
<div class="branding">
<div id="logo">
<img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" style="width:100px;" />
</div>
<span class="i-b"><h1><u>My</u> Website bby</h1></span>
</div>
<nav>
<ul>
<li>Home</li>
<li>Photogallery</li>
<li>Contact me</li>
</ul>
</nav>
</div>
Jsfiddle code
check this out i removed all the floats and worked with flex
body {
font-size:20px;
font-family: Optima, sans-serif;
line-height:1.5;
padding: 0;
margin:0;
}
.container {
width:80%;
overflow:hidden;
}
header {
font-family: Monaco, sans-serif;
color:white;
padding-top:100px;
min-width: 90%;
margin: 0;
padding: 10px;
background:#6BD326;
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
#logo {
margin-top: 5px;
display: flex;
align-items: center;
}
#logo span{
margin-left: 10px;
}
nav ul {
display: flex;
flex-wrap: wrap;
}
nav li {
padding: 0px 20px;
list-style-type: none;
}
<header>
<div class="branding">
<div id="logo">
<img src="https://cdn.mos.cms.futurecdn.net/BVb3Wzn9orDR8mwVnhrSyd-1200-80.jpg" style="width:100px;" />
<span><u>My</u> Website bby</span>
</div>
<nav>
<ul>
<li>Home</li>
<li>Photogallery</li>
<li>Contact me</li>
</ul>
</nav>
</div>
</header>
Here is your code which is work
body like that :
<body>
<div class="branding">
<div id="logo">
<img src="./img/logo.png" style="width:100px;" />
</div>
<nav>
<ul>
<li>Home</li>
<li>Photogallery</li>
<li>Contact me</li>
</ul>
</nav>
<span><h1 style="padding: 30px; margin-left:130px;"><u>My</u> Website bby</h1></span>
</div>
</div>
</body>
your css should be like that :
body {
font-size:20px;
font-family: Optima, sans-serif;
line-height:1.5;
padding: 0;
margin:0;
}
.body img{
display: inline;
}
.container {
width:80%;
overflow:hidden;
}
header {
font-family: Monaco, sans-serif;
color:white;
padding-top:100px;
min-width: 90%;
min-height: 200px;
margin: 0;
padding: 10px;
background:#6BD326;
}
#logo {
float:left;
display:inline-block;
}
nav li {
float:left;
padding: 0px 20px;
list-style-type: none;
}
your mistake was here
.branding {
float: left;
}
inside the <div class="branding"> you can add another div with a style:
display: flex;
justify-content: space-between
Please run your code through the W3C Validator.
You will see that you have an error in the HTML:
Error: Element h1 not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
You can find out more about the distinction between block and inline elements at Can <span> tags have any type of tags inside them? which in turn references the formal spec at https://www.w3.org/TR/html401/struct/global.html#h-7.5.3
For your immediate problem you could make the span a div (which can have h1 elements as children) and make both it and the image inline-blocks.
try with flex and delete float:left
.branding {
display:flex;
align-items:center;
}
Please refer to the posted image. I want to add a margin-left on the first image and then in the rest of image I don't want them. Can I use the child selectors to achieve this or there is any other way?
Can I make the images, overflow: scroll like we do in case of text? As I don't know jquery/javascript as of now.
* {
box-sizing: border-box;
}
body {
background:gray;
/*border: 2px solid yellow;*/
}
.wrapper {
width: 93%;
height: auto;
margin: auto;
}
.headwrap {
padding-top: 70px;
}
.logo {
margin: 0;
float: left;
}
.socialbuttons {
float: right;
}
.socialbuttons ul {
list-style: none;
float: right;
}
.socialbuttons ul li {
float: left;
width:50px;
height:50px;
padding:0;
margin-right: 30px;
background: #000;
border-radius:30px;
}
.socialbuttons ul li img{
margin-left:20px;
margin-top:20px;
}
.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left; /* this and see changes */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/
/* float producing wrong results */
}
.navbar ul li {
float: left; /* height of menu bar increases when float is defined */
display: inline; /* does it have any use ? */
padding: 25px 10px;
border-right: 1px solid black;
border-left: 1px solid black;
color: white;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
width: 15%;
}
.navbar ul li:first-child {
border-left: none;
}
.navbar ul li:last-child {
border-right: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
line-height: 0;
}
.clearfix:after {
clear: both;
}
.slider img {
float:left;
width:100%;
}
.text{
color:white;
margin-top:-35%;
float:left;
margin-left: 80px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-Serif;
font-size : 50px;
line-height: .5;
}
#project {
background-color: #555653;
width: 100%;
margin-top: 10px;
float: left;
}
.head {
float: left;
background-color: #1D1D1C;
width: 100%;
}
.head h3 {
color: white;
font-family: Arial , sans-serif;
font-weight: lighter;
margin-left: 20px;
}
.imgContainer img {
margin-top: 20px;
padding-left: 40px
}
<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"></img></li>
<li><img src="twitter.png"></img> </li>
<li><img src="feed.png"></img></li>
<li><img src="google.png"></img></li>
</ul>
</div>
<nav class="navbar">
<ul class="clearfix">
<li style="width:5%;"><img src="home.png"></li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li>
</ul>
</nav>
</header>
<div class="slider">
<img src="industrial.jpg" />
<div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div>
</div>
<div id="project">
<div class="head">
<h3>FEATURED PROJECTS</h3>
</div>
<div class="imgContainer">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="5.jpg"/>
<!--<img src="6.jpg"/>-->
</div>
</div>
</div>
</body>
</html>
Use :first-child selector for this:
.imgContainer img:first-child{
margin-left:10px;
}
You can easily achieve this using this css
.imageContainer img:first-child
{
margin-left:20px;
}
You can select the first child with any of the given selectors below:
.imgContainer img:first-of-type
.imgContainer img:first-child
.imgContainer img:nth-child(1)
If you want to set some sort of overflow to your images, you'll need to wrap them in another element, like a generic div and set your overflow rules to this element, standard overflow rules won't apply directly to img elements.
See CSS Tricks - overflow
I have just started my website, and I am currently working on the header/navigation bar. I've got it looking how I want, however the one thing I can't figure out, is how to centre the logo and hyperlinks vertically in the header?
Here is my HTML:
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><img src="logo.png"></h1>
</div>
<div class="nav">
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="content">
<p>
</p>
</div>
</body>
And CSS:
body {
font-family: 'Nunito', sans-serif;
width: 100%;
margin: auto;
background: #F4F4F4;
}
a {
text-decoration: none;
color: #fff;
}
img {
max-width: 100%;
}
/**********************************
HEADING/NAVIGATION
***********************************/
li {
list-style: none;
float: left;
margin-left: 25px;
padding-top: 10px;
}
.container {
width: 960px;
margin: 0 auto;
}
.header {
background: #5BBB9B;
width: 100%;
height: 200px;
top: 0;
position: fixed;
border-bottom: 1px solid black;
}
.logo {
float: left;
}
.nav {
float: right;
}
I have tried using vertical-alignment: middle;, however this didn't work.
Anyone have any suggestions?
Use
display:table;
height:100%;
for the parent and
display: table-cell;
text-align: center;
vertical-align: middle;
and check out this awesome article:
https://css-tricks.com/centering-in-the-unknown/
I'm trying to build a horizontal navigation using %'s, and I cant seem to figure out whats going on. I have it all set up how I want it, but whenever I specify a size to the A or LI nothing changes, and therefore, I can only see a silver of my background image.
<div id=mainwrap>
<div id=header>
<div id = title>
<img src="images/hangaquilt.png" width="483" height="78" alt="Hang A Quilt">
</div>
<div id = cartstatus>
<p> Your Cart Is Empty </p>
</div>
<div id=nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact Us</li>
<li>View Cart</li>
<li>Dealers</li>
</ul>
</div>
</div>
<div id=bodycontent>
<div id=sidebar>
</div>
<div id=bodytext>
</div>
</div>
<div id=slideshow>
</div>
<div id=footer>
</div>
</div>
and the CSS
body {
background-color: rgb(238,225,185);
}
#mainwrap {
margin: 0 auto;
height: 700px;
width: 75%;
max-width:1024px;
min-width:800px;
}
#header {
margin: 0 auto;
margin-top: 3%;
width: 100%;
height: 25%;
}
#header img{
margin-left: 3.3%;
}
#title {
float:left;
width: 55%;
}
#cartstatus{
float: right;
width: 45%;
}
#cartstatus p{
margin-right: 7.1%;
float: right;
}
#nav{
clear: both;
width: 100%;
height: 33%;
font-family:"Rockwell Extra Bold",Trebuchet MS, Arial, Helvetica, sans-serif;
}
#nav ul {
height: 100%;
list-style-type: none;
text-align: center;
}
#nav li{
padding: 0;
width: 20%;
height: 100%;
font-size:18px;
display:inline;
}
#nav ul li a{
background-image: url(../images/navbg.png);
width: 19%;
height: 98%;
color: black;
text-decoration: none;
}
I've done navigation likes this before, and have never had this problem. It's really frustrating as I know it's something really simple that I'm missing.
If you define element as "inline", you can't change it's width or height.
Instead of
display:inline;
try
display:inline-block;
Here is what you want: http://jsfiddle.net/JmTKb/
This might be a really basic css question but I tried to create my fluid layout following instructions from a book, so far my header and nav bar seems to be in the place but the content div isn't, also I'd like to make my content height flexible because it's for a dynamic web app so the footer should be positioned below it accordingly. Ok so here's the mockup of what id like to achieve
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
</div>
<div id="personalised">
<p>Hey there</p>
</div>
<div id="content">
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
here's my css code:
body{
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;
height: 29em;}
#header{
height: 60px;
overflow: hidden;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#personalised p {
float: left;
width: 20%;
margin-top:5%;}
#navigation{
margin: 1%;}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
list-style: none;
}
div#navigation {
float:right;
position: absolute;
top: 10%;
right: 5%;
}
#navigation ul li {
display: block;
position: relative;
float: left;
}
#navigation li ul { display: none; }
#header, #footer, #navigation, #personalised {
margin: 1%;
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;}
I know this is long, but I'd really appreciate your help. Thanks in advance
Try working on your formatting first. (It's not too bad, but can use improvement.) That's one of the biggest benefits to you is code that you can read. You can look through what I've done here and play with what you like. http://jsfiddle.net/mPH8X/
<head>
<style>
div {
border: 1px dashed #FF0000;
}
body {
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
#header {
min-height: 60px;
overflow: hidden;
margin: 1%;
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
padding: 0.5em;
}
#navigation{
margin: 1%;
float: right;
}
#navigation ul {
font-family: Arial, Verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
list-style: none;
}
#navigation ul li {
margin: 0px;
padding: 0px;
display: block;
position: relative;
float: left;
}
#navigation li ul {
display: none;
}
.body {
clear: both;
}
#personalised {
margin: 1%;
float: left;
width: 20%;
}
#content {
margin: 1%;
float; right;
min-height: 29em;
}
#personalised p {
margin: 0px;
padding: 0px;
}
#header, #footer, #navigation, #personalised {
}
#footer {
padding: 0.5em 0;
font-family: Arial, Verdana;
font-size: 10px;
text-align: center;
}
</style>
<body>
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
<div class="clear"></div>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>My account</li>
<li>Help</li>
<li>Contact Us </li>
</ul>
<div class="clear"></div>
</div>
<div class="body">
<div id="personalised">
<p>Hey there</p>
<div class="clear"></div>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<p>© TEST</p>
</div>
</body>
</html>
Edit: Looking at your content statement, you are looking for CSS's min-height. Min-height will set it to a minimum height and grow when necessary. overflow: auto; says if your content stretches past the maximum height, add a scrollbar.
I think the culprit is this:
#content {
overflow: auto;
height: 29em;}
You are explicitly setting the height of the content div. Try setting it to inherit.
Here is a fiddle where the container grows according to the number of elements in it:
http://jsfiddle.net/pUb6q/2/
Uses your layout. The changes are
#content {
border:1px solid black;
float: right;
overflow: auto;
height: inherit;
}