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;
}
Related
This is what I am trying to recreate. A basic nav.
As you can see here, there is an image next to the "ABOUT US" text, that is what I am having trouble with. How exactly can I make the img appear before the "ABOUT US" text? It always appears above it. Thanks in advance!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
font-family: "Open Sans",sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
header {
padding: 2em 4em;
background-color: #121b21;
}
.nav-area {
list-style: none;
text-align: center;
}
.nav-area li {
display: inline-block;
padding: 0 1.5em;
color: #c4cbcf;
font-weight: 700;
font-size: 0.9em;
background-color: transparent;
}
<header>
<div class="container">
<nav>
<img src="header_logo.png" alt="Logo header">
<ul class="nav-area">
<li>ABOUT US</li>
<li>CONSULTING</li>
<li>SKYLIGHT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
Give a display:flex; property to nav and it will work :) Then you can adjust other CSS accordingly.
You may also set display:flex; on .nav-area, then you don't need inline-block on .nav-area li's.
.nav-area {
list-style: none;
text-align: center;
display:flex;
align-items:center;
}
CODEPEN WORKING DEMO: https://codepen.io/emmeiWhite/pen/WNGYJjq
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width:25px;
height: auto;
margin-left:1.5em;
}
body {
font-family: "Open Sans",sans-serif;
}
.container {
max-width: 900px;
margin: 0 auto;
}
header {
padding: 2em 4em;
background-color: #121b21;
}
nav{
display:flex;
align-items:center;
}
.nav-area {
list-style: none;
text-align: center;
}
.nav-area li {
display: inline-block;
padding: 0 1.5em;
color: #c4cbcf;
font-weight: 700;
font-size: 0.9em;
background-color: transparent;
}
<header>
<div class="container">
<nav>
<img src="https://picsum.photos/200" alt="Logo header">
<ul class="nav-area">
<li>ABOUT US</li>
<li>CONSULTING</li>
<li>SKYLIGHT</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
I tried like this.
nav {
display: flex;
align-items: center;
justify-content: center;
}
If you want logo goes to left and nav-menu goes to right, try like this.
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
Add the float attribute to the img CSS declaration to obtain the desired lay-out.
img {
max-width: 100%;
height: auto;
float: left;
}
Please have a look at this fiddle
HTML:
<nav id="main_nav">
<ul>
<li>Blog</li>
</ul>
</nav>
CSS:
#main_nav {
text-align:center;
width:50%;
padding-top: 35px;
}
Why is the nav not aligning in the center of the header
Don't give unwanted margin of padding to adjust your html
Here is a working Demo
removed padding-top margin etc and added:
header{
display: flex;
align-items: center;
overflow: scroll;
justify-content: center;
}
header h1{
min-width: 250px;
margin: 0;
}
#search_and_avatar{
flex: 1;
display: flex;
justify-content: flex-end;
}
body {
margin:0;
font-family: 'Source Sans Pro', sans-serif;
}
header {
background-color:#151515;
overflow:hidden;
height: 100px;
}
h1 {
color:#FFF;
font-family: "Arial Rounded MT", "Helvetica Rounded", Arial, sans-serif;
font-size: 40px;
font-weight: normal;
line-height:25px;
padding: 0px 20px;
}
header h1, img, #search_form {
float:left;
}
#main_nav a {
color:#FFF;
text-decoration:none;
}
#main_nav {
display: table;
text-align:center;
width:50%;
}
#main_nav ul {
display: table-row;
}
#main_nav ul li {
padding: 15px;
display: table-cell;
vertical-align: middle;
top: 50%;
display:inline;
}
header img {
width:35px;
}
header{
display: flex;
align-items: center;
overflow: scroll;
justify-content: center;
}
header h1{
flex: 1;
min-width: 250px;
margin: 0;
}
header form{
text-align: right;
}
#search_and_avatar{
flex: 1;
display: flex;
justify-content: flex-end;
}
<div id="wrapper">
<header>
<h1>CSS-Tricks</h1>
<nav id="main_nav">
<ul>
<li>Blog</li>
<li>Videos</li>
<li>Almanac</li>
<li>Snippets</li>
<li>Forums</li>
<li>Shop</li>
<li>Lodge</li>
<li>Jobs</li>
</ul>
</nav>
<div id="search_and_avatar">
<form action="index.html" method="post" id="search_form">
<input type="text" id="search" name="search">
</form>
<img src="images/avatar.png">
</div>
<!--
<ul id="account_nav">
<li>Log In</li>
<li>Sign Up</li>
</ul>
-->
</header>
</div>
#main_nav {
text-align:center;
width:50%;
padding-top: 35px;
margin:0px auto;
}
Remove display: table; and add margin: 0 auto; to your nav
#main_nav {
text-align: center;
width: 50%;
padding-top: 35px;
margin: 0 auto;
}
Check this Example fiddle
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 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.
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;
}