I've done a few searches and tried a few suggestions, but nothing worked for me.
I have a fixed header menu (horizontal), the logo on the left side and the navigation on the right side. I can't find a way to vertically align both logo and navigation links inside this fixed header.
I've tried position, display and vertical-align, but couldn't get it to work. Additionally, for some weird reason, I'm not able to define a padding-left for my logo DIV, which should be 30x just like the padding-right of my navigation.
Any help would be very appreciated.
Live: http://baskra.com/teste/teste.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bask.ra</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->
<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu-fundo');
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
nav.addClass("f-menu");
} else {
nav.removeClass("f-menu");
}
});
});
</script>
<!-- FIM DO MENU FIXO -->
</head>
<body>
<div class="menu-fundo">
<div class="menu">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul id="menutop">
<li>CONTATO</li>
<li>EQUIPE</li>
<li>QUEM SOMOS</li>
<li>COMO FAZEMOS</li>
<li>O QUE FAZEMOS</li>
</ul>
</div>
</div>
<script>
$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});
</script>
<div id="slider" class="nivoSlider theme-default">
<img src="images/slide1.png"/>
<img src="images/slide2.png"/>
<img src="images/slide3.png"/>
</div>
<div class="row">
<div class="o-que-fazemos">
<a id="que"></a>
<h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
<h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>
<div class="o-que-fazemos-content-1">
<br />
<br />
<b>SUA MARCA VAI ALÉM.</b><br /><br />
<b><i>Consolidar uma marca vai além.</i></b><br /><br />
Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.
</div>
<div class="o-que-fazemos-content-2">
<img src="images/oqfazemos.png" />
</div>
</div>
</div>
<div class="row">
<div class="como-fazemos">
<a id="como"></a>
<h1 class="como-fazemos-title">COMO FAZEMOS?</h1>
<div class="como-fazemos-content-1">
<img src="images/comofazemos-content1.png" />
</div>
<div class="como-fazemos-content-2">
<img src="images/comofazemos-content2.png" />
</div>
<div class="como-fazemos-content-3">
<img src="images/comofazemos-content3.png" />
</div>
<div class="como-fazemos-content-4">
<img src="images/comofazemos-content4.png" />
</div>
<div class="como-fazemos-content-5">
<img src="images/comofazemos-content5.png" />
</div>
</div>
</div>
<div class="row">
<div class="quem-somos">
<a id="quem"></a>
<h1 class="quem-somos-title">QUEM SOMOS?</h1>
<h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>
<div class="quem-somos-content-1">
<br />
<br />
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
</div>
<div class="quem-somos-content-2">
<img src="images/quemsomos1.png" />
</div>
<br />
<br />
<br />
<br />
<br />
<hr>
<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>
<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>
</div>
</div>
<div class="row">
<div class="a-equipe">
<a id="equipe"></a>
EQUIPE<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
<div class="row">
<div class="o-contato">
<a id="contato"></a>
CONTATO<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
html,body {
height:auto;
margin:0;
padding:0;
border:0;
}
div {
margin:0;
border:0;
}
.login {
display: table-cell;
}
logo {
border:0;
z-index:9999;
float:left;
padding-left:30px;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 20px auto;
height: 0;
width: 50%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 2px solid #FFF;
border-bottom: 1px solid #FFF;
}
.menu-fundo {
background: #fff repeat-x 0 0;
left: 0;
top: 0;
z-index: 9999;
position:fixed;
}
.f-menu {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
} /* isso vai fazer o menu ficar fixo no topo */
.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed;
width:100%;
}
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
position: fixed;
top: 0;
right: 0;
width: 100%;
}
.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}
.menu ul li:first-child {
padding-left: 0;
}
.menu ul li a {
display: table-cell;
vertical-align: middle;
color:#000;
text-decoration:none;
border-top:3px solid #999;
}
.menu ul li a:hover {
color: #6D6D6D;
border-top:3px solid #EA0000;
}
.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
display: block;
float: left;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.o-que-fazemos {
background-image: url('images/oqfazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.o-que-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#ffc709;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
margin-left:10%;
width: 30%;
}
.o-que-fazemos-content-2 {
margin-right:10%;
width: 50%;
float: left;
text-align: right;
}
.como-fazemos {
background-image: url('images/comofazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.como-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.como-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
width: 20%;
text-align:center;
}
.como-fazemos-content-2 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:10%;
float: left;
text-align:center;
}
.como-fazemos-content-3 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:3%;
width: 20%;
float: left;
text-align:center;
}
.como-fazemos-content-4 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
margin-left:10%;
color:#FFF;
float: left;
text-align:center;
}
.como-fazemos-content-5 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
width: 20%;
float: left;
text-align:center;
}
.quem-somos {
background-image: url('images/quemsomosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.quem-somos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#414042;
float:left;
margin-left:10%;
width: 40%;
text-align: left;
}
.quem-somos-content-2 {
width: 43%;
float: left;
text-align: right;
}
.quem-somos-content-3 {
float:left;
width: 50%;
text-align: center;
}
.quem-somos-content-4 {
width: 40%;
float: left;
text-align: center;
}
.quem-somos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#fff;
font-weight:900;
letter-spacing: 2px;
}
.quem-somos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:22px;
text-align:center;
color:#414042;
font-weight:900;
letter-spacing: 2px;
}
.a-equipe {
background-image: url('images/EQUIPE-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.o-contato {
background-image: url('images/contato-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
Your first problem is already solved Now here is the solution for your second problem which is you can't give padding to logo.
the problem was in HTML you write the class logo but in CSS there is no property given to class logo. infect in your CSS file class logo not exist.
aah just checked your css uploaded here. you are missing . in your
class logo.
div.logo {
margin: 0;
padding-left: 30px;
}
You can use the padding property on the UL to get in vertically centered.
ul#menu-top {
padding: 20px 0;
// Remove your width:100% property
}
padding-left is working fine when I tested it. Try making above change and try again. Hope this will fix your issue.
Here is a screenshot from my computer. Increase the padding a little bit more to get it more centered.
Related
my page must be like this: https://ibb.co/Z1tZGs3
for now i have created that header strip and footer strip but how can I make central page info like praesent and lorem ipsum someone can help me pls? maybe I have to add a navbar between header and footer but i don't know how to do that and how can i cut footer strip like right side i want to cut some width.
body{
background-color: #ffff;
padding:0;
margin:0;
font-family: harmy;
}
header{
background-color: #9cd5e8;
margin-bottom: -10px;
color:#838478
}
header.cut{
margin-right:50px;
}
h1.light{
font-weight: lighter;
}
.cut{
margin-left:10px;
margin-right:10px;
}
.footer{
background-color: #7fbec0;
position: fixed;
left: 0;
bottom: 0;
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<title>ORIZZONTE VIAGGI</title>
<style>
#font-face {
font-family: harmy;
src: url('./font.woff');
}
</style>
</head>
<body>
<div class="cut">
<header>
<h1 class="light"> Orizzonte Viaggi</h1>
</header>
<img src="img/beach.jpg" alt="" width="1515" height="420"/>
</div>
<div class="cut">
<div class="footer">
<p>
© 2020 <u>Harman</u>
</p>
</div>
</div>
</body>
</html>
This is my proposal based on your model
body{
background-color: #ffff;
padding:0;
margin:0;
font-family: harmy;
}
#bodyCenter{
margin-left:25px;
margin-right:25px;
}
header{
background-color: #9cd5e8;
margin-bottom: -10px;
color:#838478;
margin-right:40px;
}
h1.light{
font-weight: lighter;
}
#bigPicture{
width:100%; /*will take 100% from bodyCenter available width*/
}
footer{
background-color: #7fbec0;
/*position: fixed;
left: 0;
bottom: 0;*/
display: flex;
justify-content: center;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
<title>ORIZZONTE VIAGGI</title>
<style>
#font-face {
font-family: harmy;
src: url('./font.woff');
}
</style>
</head>
<body>
<div id="bodyCenter">
<header>
<h1 class="light"> Orizzonte Viaggi</h1>
</header>
<img src="https://s2.qwant.com/thumbr/474x325/d/e/3357a239e6aeeb0497d846500eaf15f26a80324945abb2de8bdaef07e06823/th.jpg?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.UKfu8ufBwKPECTmhud4_cQHaFF%26pid%3DApi&q=0&b=1&p=0&a=0" id="bigPicture">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nibh id leo aliquet porta. Etiam euismod pretium mi vitae pretium. Cras eu nibh molestie, venenatis mauris vitae, auctor elit. Fusce fermentum sed ante vel fringilla. Maecenas auctor nec quam nec rutrum. Quisque eu pharetra tortor. Integer nec purus convallis, interdum urna et, tempor tortor. Morbi tristique hendrerit libero quis fermentum. Praesent fringilla fermentum nisl. Integer faucibus sit amet lacus vitae tincidunt. Pellentesque convallis augue eget ligula consectetur tincidunt. Sed cursus volutpat lorem, non rhoncus urna placerat et.
In rutrum gravida sodales. Integer commodo mi quam, et luctus arcu porta sit amet. Suspendisse potenti. Nullam sed lobortis ex. Phasellus commodo ornare velit, quis viverra nulla rhoncus ac. Nulla facilisi. Praesent congue felis eu orci fringilla consequat. In vitae finibus lorem. Aliquam convallis molestie lectus, quis sagittis mauris accumsan et. Sed luctus, turpis vel mattis vehicula, tellus ligula ornare urna, non mattis dolor elit eu lacus.
</div>
<footer>
<p>© 2020 <u>Harman</u></p>
</footer>
</div>
</body>
</html>
I'm trying to align a div at the bottom right corner inside a specific column, but all instead it aligns at the bottom right corner of the main parent.
https://jsfiddle.net/jonnijonnason/L9vg468g/
If you check the fiddle, I want it to align beneath the image.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
CSS
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
Add to <div class="item"> column a position:relative;
The button inside has an absolute position so it is relative to the next parent element with relative (or absolute) positioning.
Also, to make it not overlap the text you can also set padding-bottom
.item.contains-button {
position:relative;
padding-bottom:60px;
}
Your updated JSFiddle
What you need to do is just add Position: relative; to the last column. This will make Read more div to be at bottom right corner of the direct parent DIV instead of the main DIV.
Updated jsFiddle: https://jsfiddle.net/L9vg468g/4/
HTML:
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
CSS:
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
position: relative;
}
.item.lastcol {
position: relative;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
As you have placed other two columns description inside paragraph tag, you can keep third description also inside a paragraph and it can be achievable by using css flexbox if your browser support is IE10 +.
Updated code below.
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
display: flex;
flex-direction: column;
}
.row {
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: relative;
bottom: 0;
right: 0;
}
.item h3 {
order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p>
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
I am currently coding a website for my design paper at uni. I am nearly done, but am having problems with the center alignment of the navigation bar.
It doesn't align to the center of the page like the text and image content does, it is slightly too far to the right. As shown below:
Could anyone help me fix this problem?
EDIT: If anyone could also help me create the anchor for the icon part of the nav bar that would be awesome - I don't know what to use the <a name=#home> part on
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>S Gard</title>
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="icon" type="image/png" href="favicon.ico" />
</head>
<body style="position:absolute; height:100%;">
<br />
<header>
<nav>
<ul>
<li><h2>ABOUT ME</h2></li>
<li><img src="ICON.jpg" width="60%" height="60%"></li>
<li><h2>PORTFOLIO</h2></li>
</ul>
</nav>
</header>
<br /><br /><br /><br /><br /> <br />
<div class="section1">
<div class="center">
<a name="#home"><img src="mainImage2.jpg" width="55%" height="55%" ></a>
<br /><br />
<div class="scroll">
<img src="scrollArrow.png" width="5%" height="5%">
</div>
</div>
</div>
<br />
<div class="about">
<a name="about"><br /><br /><br /><br /><br /><br /><br /></a>
<h2>ABOUT ME</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nibh vel erat efficitur egestas. Nullam ac urna id arcu posuere egestas. Praesent est magna, fringilla nec bibendum et, pellentesque eu mi. Nulla quis volutpat nisi, bibendum vulputate nisl. Donec porta odio eget velit dignissim vulputate. Nulla vitae sodales quam. Phasellus vulputate purus eu purus lobortis commodo.
Nulla pulvinar arcu a tempus maximus. Vestibulum eleifend, augue vel iaculis interdum, nisi ante lacinia tortor, ac porttitor nunc turpis eu ante. Aliquam et nisl et ex rhoncus vulputate sit amet eu dolor. Nunc risus elit, pulvinar nec sapien id, tincidunt dictum diam. Vestibulum gravida a metus non vehicula. Pellentesque in euismod dui, id consectetur nulla. Nunc libero ligula, pretium id orci et, pellentesque vestibulum dolor.
</p>
<div class="scroll">
<img src="scrollArrow.png" width="5%" height="5%">
</div>
</div>
<div class="portfolio">
<a name="portfolio"><br /><br /><br /><br /><br /><br /><br /></a>
<h2>PORTFOLIO</h2>
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et nibh vel erat efficitur egestas. Nullam ac urna id arcu posuere egestas. Praesent est magna, fringilla nec bibendum et, pellentesque eu mi. Nulla quis volutpat nisi, bibendum vulputate nisl. Donec porta odio eget velit dignissim vulputate. Nulla vitae sodales quam. Phasellus vulputate purus eu purus lobortis commodo.
Nulla pulvinar arcu a tempus maximus. Vestibulum eleifend, augue vel iaculis interdum, nisi ante lacinia tortor, ac porttitor nunc turpis eu ante. Aliquam et nisl et ex rhoncus vulputate sit amet eu dolor. Nunc risus elit, pulvinar nec sapien id, tincidunt dictum diam. Vestibulum gravida a metus non vehicula. Pellentesque in euismod dui, id consectetur nulla. Nunc libero ligula, pretium id orci et, pellentesque vestibulum dolor.
</p>
</div>
</body>
</html>
And the CSS:
html{
background-color: white;
}
h1 {
color: black;
/*opacity: 0.7;*/
font-weight: 300;
font-family: 'Lato', sans-serif;
}
h2 {
color: black;
/*opacity: 0.7;*/
font-weight: 300;
font-family: 'Lato', sans-serif;
}
header{
position: fixed;
width: 100%;
top: 0;
z-index: 999;
text-align: center;
}
header nav ul {
background-color: rgb(255, 255, 255);
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header nav ul li {
display: inline-block;
text-align: center;
}
header nav a:link, a:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
header img{
vertical-align: middle;
}
header nav a:hover, a:active {
opacity: 0.4;
}
.section1{
width: 100%;
height: 100%;
position:relative;
}
.center{
text-align: center;
}
.scroll a:hover, a:active {
opacity: 0.4;
}
div.about{
position:relative;
text-align: center;
width: 100%;
height: 100%;
}
p.para{
text-align: center;
width:100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
div.portfolio{
position: relative;
text-align: center;
width: 100%;
height: 100%;
}
Css:
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
</style>
Try to add
html,body{
margin:0;padding:0;
}
Demo here
Here's what I'm working on right now: http://baskra.com/teste/teste.html
For some weird reason, the section Como Fazemos isn't showing full width just like the rest of the page. I haven't done anything different.
What am I missing?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bask.ra</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- COMECO DO NIVO SLIDER -->
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- FIM DO NIVO SLIDER -->
<!-- COMECO DO MENU FIXO -->
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu-fundo');
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
nav.addClass("f-menu");
} else {
nav.removeClass("f-menu");
}
});
});
</script>
<!-- FIM DO MENU FIXO -->
</head>
<body>
<div class="menu-fundo">
<div class="menu">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul id="menutop">
<li>CONTATO</li>
<li>EQUIPE</li>
<li>QUEM SOMOS</li>
<li>COMO FAZEMOS</li>
<li>O QUE FAZEMOS</li>
</ul>
</div>
</div>
<script>
$("#menutop a").click(function(){
var menuid = $(this).attr("href");
$("body").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow");
return false;
});
</script>
<div id="slider" class="nivoSlider theme-default">
<img src="images/slide1.png"/>
<img src="images/slide2.png"/>
<img src="images/slide3.png"/>
</div>
<div class="row">
<div class="o-que-fazemos">
<a id="que"></a>
<h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1>
<h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1>
<div class="o-que-fazemos-content-1">
<br />
<br />
<b>SUA MARCA VAI ALÉM.</b><br /><br />
<b><i>Consolidar uma marca vai além.</i></b><br /><br />
Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br />
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado.
</div>
<div class="o-que-fazemos-content-2">
<img src="images/oqfazemos.png" />
</div>
</div>
</div>
<div class="row">
<div class="como-fazemos">
<a id="como"></a>
<h1 class="como-fazemos-title">COMO FAZEMOS?</h1>
<div class="como-fazemos-content-1">
<img src="images/comofazemos-content1.png" />
</div>
<div class="como-fazemos-content-2">
<img src="images/comofazemos-content2.png" />
</div>
<div class="como-fazemos-content-3">
<img src="images/comofazemos-content3.png" />
</div>
<div class="como-fazemos-content-4">
<img src="images/comofazemos-content4.png" />
</div>
<div class="como-fazemos-content-5">
<img src="images/comofazemos-content5.png" />
</div>
</div>
</div>
<div class="row">
<div class="quem-somos">
<a id="quem"></a>
<h1 class="quem-somos-title">QUEM SOMOS?</h1>
<h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1>
<div class="quem-somos-content-1">
<br />
<br />
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X.
<br />
<br />
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente.
</div>
<div class="quem-somos-content-2">
<img src="images/quemsomos1.png" />
</div>
<br />
<br />
<br />
<br />
<br />
<hr>
<div class="quem-somos-content-3">
<img src="images/quemsomos3.png" />
</div>
<div class="quem-somos-content-4">
<br />
<br />
<img src="images/quemsomos2.png" />
</div>
</div>
</div>
<div class="row">
<div class="a-equipe">
<a id="equipe"></a>
EQUIPE<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
<div class="row">
<div class="o-contato">
<a id="contato"></a>
CONTATO<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
<br />
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis.
<br />
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis.
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus.
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
html,body {
height:100%;
margin:0;
padding:0;
border:0;
}
div {
margin:0;
border:0;
}
.login {
display: table-cell;
}
logo {
border:0;
z-index:9999;
float:left;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 20px auto;
height: 0;
width: 50%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 2px solid #FFF;
border-bottom: 1px solid #FFF;
}
.menu-fundo {
background: #fff repeat-x 0 0;
left: 0;
top: 0;
z-index: 9999;
position:fixed;
}
.f-menu {
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
} /* isso vai fazer o menu ficar fixo no topo */
.menu {
height: 100px;
left: 0;
top: 0;
z-index: 9999;
background: #fff repeat-x 0 0;
position:fixed; width:100%
}
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
position: fixed;
top: 0;
right: 0;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.menu ul li {
float: right;
padding-right:30px;
padding-top:0px;
}
.menu ul li:first-child {
padding-left: 0;
}
.menu ul li a {
color:#000;
text-decoration:none;
border-top:3px solid #999;
}
.menu ul li a:hover {
color: #6D6D6D;
border-top:3px solid #EA0000;
}
.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato {
display: block;
float: left;
position: relative;
overflow: hidden;
}
.o-que-fazemos {
background-image: url('images/oqfazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.o-que-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#ffc709;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.o-que-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
margin-left:10%;
width: 30%;
}
.o-que-fazemos-content-2 {
margin-right:10%;
width: 50%;
float: left;
text-align: right;
}
.como-fazemos {
background-image: url('images/comofazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.como-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.como-fazemos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
float:left;
width: 20%;
text-align:center;
}
.como-fazemos-content-2 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:10%;
float: left;
text-align:center;
}
.como-fazemos-content-3 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-left:3%;
width: 20%;
float: left;
text-align:center;
}
.como-fazemos-content-4 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
margin-left:10%;
color:#FFF;
float: left;
text-align:center;
}
.como-fazemos-content-5 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#FFF;
margin-right:15%;
width: 20%;
float: left;
text-align:center;
}
.quem-somos {
background-image: url('images/quemsomosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
float:left;
overflow: hidden;
}
.quem-somos-content-1 {
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
color:#414042;
float:left;
margin-left:10%;
width: 40%;
text-align: left;
}
.quem-somos-content-2 {
width: 43%;
float: left;
text-align: right;
}
.quem-somos-content-3 {
float:left;
width: 50%;
text-align: center;
}
.quem-somos-content-4 {
width: 40%;
float: left;
text-align: center;
}
.quem-somos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#fff;
font-weight:900;
letter-spacing: 2px;
}
.quem-somos-subtitle {
font-family: 'Source Sans Pro', sans-serif;
font-size:22px;
text-align:center;
color:#414042;
font-weight:900;
letter-spacing: 2px;
}
.a-equipe {
background-image: url('images/EQUIPE-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.o-contato {
background-image: url('images/contato-FUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
font-size:28px;
padding: 50px;
}
.banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
Since the elements are floating, you would add width:100% to them. In addition, you should also add box-sizing: border-box in order to ensure that the width calculations include the padding to prevent alignment issues.
.row, .o-que-fazemos, .como-fazemos,
.quem-somos, .a-equipe, .o-contato {
display: block;
float: left;
position: relative;
overflow: hidden;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Reduce the margin-right of the class .como-fazemos-content-5 then it is in one div.
No need of right margin here.
Is the issue the last button wrapping to the next line? You could better write your code with a class to reuse on each defining the width of the items since they are the same width.
.como-fazemos_content{
width:20%;
}
Also consider using a font for frequently used icons like your plus symbol. Check out icomoon. You can make live edits to them similar to a font and use CSS3 pseudo classes to add them.
I have a css layout which is centered, with 100% height. Everything looks good except that I need borders on the left and right side, with background images, that also must extend to 100% height of the page.
I've tried lots of different options but can't seem to get this worked out.
Please take a look at my code and let me know what I can do. Keep in mind everything but the right and left columns is positioned as I need it.
The left and right columns are leftbdr and rightbdr.
Thanks for any assistance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tmp Site Mockup</title>
<!-- <link rel="stylesheet" type="text/css" href="assets/css/core2.css" /> -->
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#E7E7E7 url(assets/img/bg.gif) repeat-x top;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:#9C090C;
}
p {
line-height:1.5;
margin:0 0 1em;
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:974px;
background:#F2F8FB;;
height:auto !important; /* all other browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* all other browsers */
}
#leftbdr{
width:49px;
float:left;
position:relative;
background:url(assets/img/lftSideShadow.jpg) repeat-y right top;
}
#rightbdr{
width:11px;
float:right;
position:relative;
background:url(assets/img/rgtSideShadow.jpg) repeat-y top;
}
#header {
height:22px;
padding-top: 4px;
padding-right: 27px;
border: 1px solid #6B0100;
background-color:#CE0200;
color:#FFFFFF;
text-align: right;
}
#header p {
font-family: Tahoma, arial;
font-size:11px;
margin:0;
}
#subheader {
height:122px;
border-bottom:2px solid #B3B3B3;
background-color: white;
}
#welcome {
height:31px;
border-top:1px solid white;
border-bottom:1px solid white;
background-color: #C20F00;
}
#topnav {
height:62px;
background:#B1B1B1 url(assets/img/topNavBG.jpg) no-repeat left top;
}
#topnav p{
text-align:right;
padding-right:22px;
font-size:10px;
color:#333;
}
#content {
padding:1em 1em 5em; /* bottom padding for footer */
background:#F2F8FB;
}
#content p {
text-align:justify;
padding:0 1em;
}
#footer {
position:absolute;
height:72px;
width:100%;
bottom:0; /* stick to bottom */
background:#9C090C url(assets/img/footerBG.gif) repeat-x;
color:white;
}
#footer p.left {
float: left;
padding-left:15px;
padding-top:7px;
}
#footer p.right {
float: right;
padding-right:15px;
padding-top:7px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbdr" > </div>
<div id="header">
Home | Website.com | My Site | Logout
</div>
<div id="subheader">
</div>
<div id="welcome">
</div>
<div id="topnav">
<p><input name="radiobutton" type="radio" value="radiobutton" />All <input name="radiobutton" type="radio" value="radiobutton" />Documents <input name="radiobutton" type="radio" value="radiobutton" />People <input name="radiobutton" type="radio" value="radiobutton" />Google</p>
</div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque arcu eget massa laoreet sit amet eleifend sapien accumsan. Sed ut tellus augue. Phasellus non blandit sem. Aliquam consequat ipsum rhoncus augue vehicula suscipit. Nunc laoreet gravida magna nec sodales. Cras quis lorem erat. Suspendisse eu urna in lorem placerat venenatis. Curabitur sed turpis in nulla convallis blandit. Donec ut tortor libero. Donec ante eros, facilisis vitae dictum eu, ornare nec libero. Nulla turpis purus, eleifend ac porta adipiscing, adipiscing non odio.
</p>
<h2>Vestibulum eu purus</h2>
<p>
Vestibulum eu purus ut enim eleifend sodales vel a purus. Aenean at orci dolor. Sed suscipit lorem nec est venenatis rutrum. Maecenas tempor, mi ac molestie suscipit, augue diam ultricies nibh, sit amet faucibus nulla leo vel nunc. Integer magna est, egestas nec placerat vel, pulvinar sed erat. Sed blandit ligula ac sapien venenatis rutrum. Aenean nec velit ut neque pharetra lobortis. Sed vulputate, ante ut euismod semper, nisi ante viverra ipsum, ac malesuada tellus nibh in tellus. Proin non velit ligula, eget egestas sapien. Curabitur ut viverra leo. Suspendisse pellentesque mauris lectus. Aenean sed arcu eleifend tortor cursus dapibus id in turpis. Nullam neque purus, congue id consectetur ut, dignissim id dolor. Praesent vehicula arcu vitae tellus lobortis mollis. Sed nec dapibus orci.
</p>
<h2>Maecenas faucibus sapien</h2>
<p>
Vestibulum at nibh nec elit pulvinar feugiat vel et erat. Maecenas faucibus sapien at enim dictum pharetra ac et augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor consequat auctor. Phasellus eu nibh nulla. Donec tempor scelerisque sodales. Fusce id neque quam. Cras sollicitudin dictum nisi, eu facilisis velit sodales quis. Aenean tempus congue erat in consequat. Curabitur odio ipsum, luctus sit amet accumsan quis, consequat nec elit. Nunc tristique nunc eget metus placerat vitae consequat erat tempus.
</p>
<p> </p>
</div>
<div id="footer">
<p class="left">
2010 Company Name, Inc. All Rights Reserved.<br />
<span style="color:#CCCCCC;">For internal use only by Company employees. Please do not disturibute.</span>
</p>
<p class="right">
Company Home | My Site | Log Out
</p>
</div>
<div id="rightbdr" > </div>
</div>
</body>
#container is the key. It takes up the full area of your page. You could apply a background/border style to it and/or <body> to achieve what you want.
For example a repeating image slice on <body> that is centered with repeat-y could give the effect of a graphical border without needing leftbdr and rightbdr.