I created a 3 column grid with 3 paragraphs. The first paragraph has an extra space from the top than the other two. Can anyone help? I attached an image if it helps at all. I'm still a beginner at coding so you'll notice a bunch of weird things that I'm doing that aren't practical.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Qualenist</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="mainBanner">
<div class="menuBox"></div>
<img src="menuBars.png" style="position: absolute; margin-top: 35px; margin-left: 260px;"/>
<h6><span>already a member?</span> Sign in</h6>
<h1>Qualenist</h1>
<h2>Lorem ipsum dolor sit amet & consectetur adipisicing elit</h2>
<div class="divider"></div>
<div class="signUpBox"></div>
<h3>Sign Up</h3>
<h4>learn more</h4>
<img src="downArrow.png" style="display: block; margin-left: auto; margin-right: auto; margin-top: -10px"/>
<div class="whatWeDo">
<h5>What we do</h5>
<img src="doSearch.png" style="position: absolute; margin-left: 292px; margin-top: 5px;"/>
<img src="doGraph.png" style="position: absolute; margin-left: 572px; margin-top: 5px;"/>
<img src="doPay.png" style="position: absolute; margin-left: 851px; margin-top: 5px;"/>
<div id="descriptions">
<p>Lorem ipsum dolor sit amet, consectetur <br>
adipisicing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur <br>
adipisicing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur <br>
adipisicing elit, sed do eiusmod tempor <br>
incididunt ut labore et dolore magna.</p>
</div>
</div>
<footer class="main-footer">
</footer>
</body>
</html>
.mainBanner {
background-image: url(/Users/omaramin/Documents/Competition/project/mainBanner.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
font-family: Bariol;
color: #ffffff;
border-color: #ffffff;
}
.menuBox {
width: 35px;
height: 35px;
border-style: solid;
margin-top: 25px;
margin-left: 252px;
position: absolute;
border-width: 1px;
border-radius: 2px;
}
h6 {
padding-left: 825px;
letter-spacing: 1px;
font-size: 12px;
}
h6 span {
color: #b3b4b4;
}
h1 {
text-align: center;
padding-top: 90px;
font-size: 36px;
letter-spacing: 1.5px;
font-weight: lighter;
}
h2 {
text-align: center;
margin-top: -15px;
letter-spacing: 1px;
font-size: 13px;
}
.divider {
border: 0;
height: 1px;
width: 45px;
margin: auto;
margin-top: 21px;
background: #ffffff;
}
.signUpBox {
width: 150px;
height: 47px;
border-style: solid;
border-width: 1px;
margin: auto;
margin-top: 25px;
border-radius: 2px;
}
h3 {
text-align: center;
margin-top: -35px;
letter-spacing: 1px;
font-size: 17px;
}
h4 {
text-align: center;
margin-top: 115px;
letter-spacing: 1px;
font-size: 12px;
}
.whatWeDo {
margin-top: -20px;
color: #5c5d5d;
font-family: Bariol;
}
h5 {
text-align: center;
margin-top: 100px;
letter-spacing: 1px;
font-size: 25px;
}
#descriptions {
-moz-column-count: 3;
-moz-column-gap: 0px;
-webkit-column-count: 3;
-webkit-column-gap: 0px;
font-size: 13px;
letter-spacing: 1px;
text-align: center;
margin-left: 200px;
margin-right: 200px;
margin-top: 170px;
line-height: 20px;
}
Looks like margins on the paragraphs. Add:
p {
margin:0;
}
jsFiddle example
You'll want to add this to your CSS:
description p {
-webkit-margin-before: 0;
-moz-margin-before: 0;
}
The moz-margin-before is necessary for some Firefox browsers. Otherwise, they'll see the weird whitespace as well.
Going to have to agree with #j08691 here...
http://jsfiddle.net/SinisterSystems/v4n7G/1/
p {
margin:0;
}
The other answers are nice, and work just fine, but I think you should change your markup. Rather than relying on CSS columns to layout the text, then absolutely positioning the images to center above the columns, just make three container <div>s for the text AND the images. Give the containers a percentage width and float:left or use flexbox to get the columns side-by-side.
If the images are the same height, you'll be assured that your text will align.
jsFiddle Example
Another benefit of this approach is that now your .column class is reusable AND you don't need to use inline or special styles for the positioning.
In my case I was placing a set of text in paragraphs into columns, so I wanted to keep spacing after each paragraph. The solution here is to remove the margin from the paragraph tag, and use padding instead.
Markup:
<div class="columns">
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
CSS:
.columns {
column-count: 2;
column-gap: 12px;
}
.columns p {
/* don't break paragraphs */
break-inside: avoid;
/* Use padding instead of margin to avoid weird space at top of the second column.*/
margin: 0;
padding-bottom: 14px;
}
Couldn't find it called out in the spec, but this appears to be down to the interplay between CSS multicol and margins. As others mentioned, setting margin to zero makes the symptom go away.
#descriptions > p { margin: 0; }
However if it were me, I'd not have used CSS multicol at all, since text flows between cols as the browser evens the height across all cols, whereas here you presumably want each description to stay in its own box.
Also CSS3 columns has poor IE support: http://caniuse.com/multicolumn
I'd have used table CSS properties, inline block, flex box, or even floats before attempting to use columns for this.
#descriptions { display: table; }
#descriptions > p { display: table-cell; }
Using table markup for non-tabular data is usually a bad idea, but using CSS's table display properties is perfectly okay.
#descriptions p {
-webkit-margin-before: 0;
margin: 0;
}
http://jsfiddle.net/helmutgranda/84jky/3/
Related
I'm trying to make the parent div's left border the exact same height as the text inside the div.
Here's the problem:
My code is simple:
#box {
width: 500px;
padding-left: 2rem;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
I found a solution that only works for one block of text, but I have 2 blocks inside the same div.
Use ::before CSS selector.
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 1
Use #media query and set different height for mobile. It's currently set to 50% if the viewport is smaller than 576px (50% is obviously too much, so you can see the effect).
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
#media screen and (max-width: 576px) {
#box::before {
height: 50%;
}
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 2
What about if you remove line-height only from the first line?
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 100%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
h1:first-line {
line-height: 0.8;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
So have a look at the code below. If you remove the margins and set the line-height to the same height (1em for example) for all the elements in the div that its concerning then you can recreate the line like below.
It might be minimal but if your going to use a different font and it's a bit off just play with the calc(1em / ..). If your going to change te line-height you might try to fiddle with calc(..em / 8).
body{ font-family: Arial, sans-serif; }
h1{ font-size: 80px; }
p{ font-size: 20px; }
div > *{
position: relative;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
div > *::before {
position: absolute;
content: '';
border-left: 3px solid DarkSeaGreen;
height: 100%;
left: -5px;
}
div > *:first-child::before{ top: calc(1em / 8); }
div > *:last-child::before { bottom: calc(1em / 8); }
<div>
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
Using :Before selector with height:93% of its parent and eyeballing it from top:5.5%
#box {
width: 500px;
padding-left: 2rem;
position:relative;
}
#box:before{
content:"";
position:absolute;
height:93%;
top:7%;
left:0;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
I have a specific box style that I'm trying to accomplish and it's got me stumped. Here is a reference image:
box with border and additional line styling
A few items, first and foremost, I'm beginning to learn responsive design and I've been able to accomplish this but as soon as I start to resize it breaks. I would like it the box and hr to work all as one item.
What I've tried:
- Box with border
- HR styled within the box div and outside
- HR with Z-Index
Here is the code:
#valuesContainer {
border: 1px;
border-style: solid;
border-color: #ccc;
font-family: sans-serif;
font: Source;
font-weight: normal;
font-size: 20px;
margin: 8%;
padding: 5%;
line-height: 1;
}
#valueTitle {
font-family: sans-serif;
font: Source;
font-weight: 600;
font-size: 22px;
}
#hrTop {
width: 30vh;
color: red;
border-top: 5px solid #E7503D;
position: relative;
margin-right: -.2%;
margin-top: -.75%;
z-index: 999;
}
#hrTopRight {
border: none;
border-left: 5px solid #E7503D;
height: 10vw;
width: 1px;
margin-top: -16%;
}
<div class="row">
<div class="col-6">
<div id="valuesContainer" class="box">
<hr id="hrTop"align="right">
<h1 id="valueTitle">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim nunc.
</p>
<hr id="hrTopRight"align="right">
</div>
</div>
I'm not entirely sure I'm going about this the right way, but any help would greatly appreciate it. I have tried to search around and this is as far as I've been able to get with the information I found.'
UPDATE:
I couldn't see a way to award this answer since it was a comment. But I believe I may have found a much better way of doing this without using an HR tag.
t looks like you are using to decorate the box and not to indicate a separation in your content (since they are at the very start and end). You can use a pseudo-element on your #valuesContainer instead to layer a box on top with absolute positioning (make sure #valuesContainer is relatively positioned).
Try using position: absolute and relative on the parent div
#valuesContainer {
border: 1px;
border-style: solid;
border-color: #ccc;
font-family: sans-serif;
font: Source;
font-weight: normal;
font-size: 20px;
margin: 8%;
padding: 5%;
line-height: 1;
position: relative;
}
#valueTitle {
font-family: sans-serif;
font: Source;
font-weight: 600;
font-size: 22px;
}
#hrTop {
width: 30vh;
color: red;
border-top: 5px solid #E7503D;
position: absolute;
top: -17px;
right: -7px;
z-index: -999999;
}
#hrTopRight {
border: none;
border-left: 5px solid #E7503D;
height: 10vw;
width: 1px;
position: absolute;
top: -14px;
right: -8px;
}
<div class="row">
<div class="col-6">
<div id="valuesContainer" class="box">
<hr id="hrTop"align="right">
<h1 id="valueTitle">Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque varius morbi enim nunc.
</p>
<hr id="hrTopRight"align="right">
</div>
</div>
I'm having trouble getting one of my absolutely positioned divs to display correctly. It's getting cut off unless I set a height for the parent (relative) div which I can't do as I will never know the height required.
I originally wasn't using any absolute positioning but the contents of the comm div were wrapping underneath the avatar div so I thought absolute positioning would fix it and it has, apart from the text being cut off at the bottom.
This is the structure and you can see what's happening in this fiddle.
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: block;
overflow: hidden;
position: absolute;
left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
display: block;
position: absolute;
left: 70px;
top: 20px;
height: 100%;
}
<div class="main">
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
John Doe
<div class="posted">8 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet.
</p>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
Jimmy Doe
<div class="posted">18 mins ago</div>
</div>
<p class="comm">Ut enim ad minim veniam.
</p>
</div>
</div>
Try using this modified css code.
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: flex;
margin-left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
}
p.comm {
display: block;
margin-left: 70px;
height: 100%;
}
You need to wrap .top and .comm in a div and with the use of flex you can achieve it
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin:20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
display: flex;
}
a.avatar {
margin-right: 10px;
}
a.avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.top {
width: 100%;
overflow: hidden;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
margin-top: 5px;
}
.right {
max-width: 88%;
}
<div class="main">
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
</div>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
Working fiddle here
Just modify on your p.comm selector like below:
p.comm {
display: block;
position: relative;
top: 10px;
padding-left: 60px;
}
I am making an author box. I want the person's picture at the right of the box while still inside the parent div. Whatever styles I apply, I can't make the picture appear inside the div and on the right smoothly, what is wrong here?
.authorBox {
background: #222222;
width: 100%;
padding:1.5em 2em;
position: relative;
border-left:15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color:#444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width:100%;
height:100%;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
.personContainer {
float:right;
}
<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
First of all a div with no height and width won't be seen, so you div with the background has to have a defined width/height so you can see it.
and you put in the right by positioning it absolute and right:0 or a small amount just to push it from the edge.
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personContainer {
height: 100px;
width: 300px;
position: absolute;
right: 10px;
top: 1.5em;
}
.personImg1 {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-image: url('http://via.placeholder.com/350x150');
}
<div class="authorBox">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat at nisl laoreet ultrices"
</p>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
Your .personImg1 has width:100%; and height:100%;, which means it gets the full width and height of its parent container - i.e. relative settings.
But the parent container's only CSS property is .personContainer { float:right; } – there are no width or height settings for it, resulting in zero height both for this container, the .personImg1 DIV and therefore also the background-image of .personImg1. So you need to assign some width and height to .personContainer
Actually you might want to consider to just use a regular img tag instead of that .personImg1 DIV and its background-image...
Are you locating your image properly from your folders?
Also, you can try this
.personImg1 {
display:block;
position:absolute;
background:url("../img/person1.jpeg");
background-size: 100% 100%;
background-repeat:no-repeat;
width:100%;
height:100%;
float:right;
bottom:0;
right:0;
}
Try this solution using flex box.
.authorBox {
background: #222222;
width: 100%;
padding: 1.5em 2em;
position: relative;
border-left: 15px solid #d53362;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
h5.author {
color: #fff;
font-weight: 600;
font-size: 1.5em;
}
h5.authorRole {
color: #d53362;
font-weight: 600;
font-size: 1.3em;
}
p.authorQuote {
color: #444;
font-style: italic;
margin-top: 20px;
font-size: 1.1em;
line-height: 1.5em;
}
.personImg1 {
width: 100px;
height: 100px;
background-size: cover;
background-image: url(../img/person1.jpeg);
}
<div class="authorBox">
<div class="colContainer">
<h5 class="author">First Last</h5>
<h5 class="authorRole">Job role goes here</h5>
<p class="authorQuote">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu erat
at nisl laoreet ultrices"</p>
</div>
<div class="personContainer">
<div class="personImg1"></div>
</div>
</div>
This is my first post on stack overflow, so if I do something wrong please inform me :).
This is the HTML:
<nav>
<div><img src="images/logo.png"</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
And the CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa); *{border:1px dotted black;}
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: block;
}
nav div {
display: block;
float:right;
height: 100%;
font-size: 25px;
}
nav:first-child {
float:left;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
This is the fiddle http://jsfiddle.net/LuTLm/ .
My nav has 5 elements: an image and four links. I'm trying to make the apear aligned on the navigation bar, with every element floating to the right, exept the first one (the image) wich floats left and should be resized to fit on the 10% nav.
This shoul be pretty basic. I'm just starting to code web. Alternatives are also welcome as long as they are a actual better solutions.
Sorry, I missed the bit about floating the img left..
clean up the html to close off the IMG tag with /> and then either add a class or inline css to float the div containing the img to the left..
<div style='float:left'><img src="images/logo.png" /></div>
or
<div class='FloatLeft'><img src="images/logo.png" /></div>
.FloatLeft
{
float: left;
}
or
change the css like this
nav div:first-child {
float:left;
}
Just update yuor css from
nav:first-child {
float:left;
}
to
nav div:first-child {
float:left; // make it float left
width: 10%; // resize it to 10% width
}
DEMO
You can also use CSS tables to do navigation bars. I've found they have a lot of nice properties, such as filling up the full width with evenly spaced navigation items, and are well supported in all modern browsers. They even work well with all sorts of semantic markup, including links of lists.
Given the HTML:
<body>
<nav>
<div>
<img src="images/logo.png">
</div>
<div>Noticias</div>
<div>Eventos</div>
<div>Alumnos</div>
<div>Contacto</div>
</nav>
<div id="content">
<h3><span class="green">Noticias |</span> Los comunicados y anuncios <span class="green">oficales</span> de la institución</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec magna pulvinar, posuere lacus nec, suscipit risus. Nunc vitae sollicitudin nisl.</p>
You would use the following CSS:
#import url(http://fonts.googleapis.com/css?family=Comfortaa);
html {
background-color: #FFFFFF;
min-height: 2000px;
}
body {
color: #1F4F75;
font-family: Comfortaa, sans-serif;
}
nav {
height: 10%;
width:100%;
position: fixed;
top: 0;
left: 0;
box-shadow: 0px 10px 10px #888888;
background-color: #FFFFFF;
display: table;
table-layout: auto;
}
nav div {
display: table-cell;
font-size: 25px;
vertical-align: middle;
}
nav div:first-child {
width: 10%;
}
#content {
width: 70%;
margin: auto;
margin-top: 7%;
}
.green {
color:#91BA30;
}
h3 {
font-size: 25px;
text-align: center;
font-weight: 700;
}
p {
line-height: 1.4;
font-size: 17px;
text-align: justify;
color: #1F4F75;
font-weight: 400;
}
DEMO