I'm learning web designing. I tried to make a page out of my knowledge. The page is plant text. Here is the code.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Sample Site</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href='#whatwedo'>What We Do?</a></li>
<li><a href='#vision'>Our Vision</a></li>
<li><a href='#work'>Our Work</a></li>
<li><a href='#customer'>Our Proud Customers</a></li>
<li><a href='#testimonial'>Testimonials</a></li>
<li><a href=''>Blog</a></li>
<li><a href=''>About Us</a></li>
<li><a href=''>Contact Us</a></li>
</ul>
</nav>
</header>
<div id='whatwedo'>
<h1>What We Do?</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id='vision'>
<h1>Our Vision</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'work'>
<h1>Our Work</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = 'customer'>
<h1>Our Proud Customers</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor. Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit. Nullam non mauris eget augue vestibulum vulputate eu non tortor. Curabitur sed diam ut purus consequat scelerisque. Curabitur a augue ut purus hendrerit rutrum vitae vel velit. Etiam iaculis leo magna, sed suscipit sapien venenatis quis. Fusce dictum est sit amet faucibus pretium. Pellentesque tempor velit eu nunc egestas, sed tempor ex pulvinar. Nam aliquet tempor metus a mollis. Praesent sed orci neque. Nulla ultrices enim sed erat placerat dapibus. Proin lorem risus, consequat vel massa in, vehicula laoreet tellus. In sed magna et metus posuere tempor. Vivamus in iaculis tortor. Aenean est quam, auctor nec blandit vel, venenatis ac nulla.
</p>
</div>
<div id = "testimonial">
<h1> Testimonials</h1>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis fermentum dolor.<br /> Quisque magna dui, lobortis et malesuada scelerisque, consequat non velit.</blockquote>
</div>
<footer>
<nav>
<ul>
<li><a href=''>Sales Company</a></li>
<li><a href=''>Local Resellers</a></li>
<li><a href=''>Special Orders</a></li>
<li><a href=''>Comapny Officies</a></li>
<li><a href=''>Subsidiaries</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Below is the css file.
html {
font-size: 100%;
line-height: 1.8em;
}
* {
box-sizing: border-box;
border-color: white;
}
/*
Navigation
*/
nav ul{
position: fixed;
top: 0%;
}
nav ul li{
float: left;
margin: 1em 0.5em;
list-style: none;
}
#whatwedo {
clear: left;
margin-top: 8em;
}
/* Navigation Ends
*/
background {
background-color: white;
}
blockquote:before {
content: "''";
}
blockquote:after {
content: "''";
}
#testimonial {
text-align: center;
}
When I open the webpage, my fixed positioned menu gets overlapped. I don't want it to overlap. The overlap gets corrected when I remove this line:
top: 0%;
from this:
nav ul{
position: fixed;
top: 0%;
}
Will you please help me about what's causing this error. When the line is added, menu gets overlapped and when the line is removed the menu comes down and come in front of the other content. Please correct it and explain me the problem.
I think this is the correct behavior of position:fixed
Keep in mind, that position of fixed element started from the border of window, not from it's parent element.
btw, if you write 0, you don't have to type it's units (%) zero is zero, no matter in which units :)
Svoka, If you open the web page you will come to know that the menu is overlapping each other. I don't want it to overlap. I want to correct this behaviour. However, the things you are telling me are already known to me. I want the overlapping glitch to be removed.
Related
I'm attempting to have text flow around images in the following fashion:
eg, images in two columns, with one image in the "center" column and a number of them in the right column. I tried "floating boxes" via display:inline-block; and I tried a table-like config using display:table/display:table-cell, but I was unable to provide the correct (changing) width for the text on the left.
(The apparent alignment of the 2nd parag of text with the bottom of the center image is not necessary.)
Appreciation for your assistance!
Here's a demo using float - does this accomplish what you want?
.column {
float: right;
}
.column img {
clear: both;
float: right;
margin: 5px;
}
<div class="column">
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
<img src="http://via.placeholder.com/100x100" />
</div>
<div class="column">
<img src="http://via.placeholder.com/200x200" />
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et velit laoreet, volutpat urna venenatis, porttitor ligula. Ut nulla ipsum, pulvinar et metus sed, luctus volutpat velit. Nam consectetur diam eget dui rutrum imperdiet. Sed ornare tempor
lorem. Cras sed neque fermentum, porttitor tortor eget, efficitur ligula. Maecenas laoreet dignissim arcu vitae semper. Suspendisse ac elementum ipsum, eu convallis urna. Etiam interdum, leo et molestie aliquam, turpis augue mattis neque, a pharetra
diam orci nec augue. Aliquam id nisl a massa rhoncus mollis. Suspendisse et ex sit amet mi consequat efficitur. Nulla at turpis nec ante eleifend consequat. Nulla in molestie magna.</p>
I would like to know the best way to implement a header/nav that sits over the top of a home page banner div so that the banner's background shows through the header. The content of the header would be located in a template file, while the content of the homepage banner would be outside the template. Because of this, I don't think I can/should nest the header inside the banner. Also, because I'm using a template, the same header will be used on pages other than the home page that don't have a banner.
So far I've got something that sort of works, but I had to do some things that seem a bit inelegant:
1) I had to code the header after the banner. It's probably not a big deal, but I suppose it would be better for screen readers if the first part came first and the second part second.
2) In order for the content text to clear the absolutely positioned banner, I put a bunch of padding at the top of the #content div. But unless the banner is a fixed height, the amount of padding required will vary. Also, on pages that don't have a banner, I'd have to remove that padding entirely.
What's the better way?
body {
font-family: helvetica;
margin: 0;
}
#banner {
background-image: url('http://toprival.com/temp/jsfiddle/background.jpg');
margin: 0;
padding: 100px 30px 30px 30px;
position: absolute;
top: 0;
width: 100%;
background-size:cover;
}
#banner h1 {
font-size: 3em;
}
header {
position: absolute;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
right:0;
padding: 30px;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin-right: 30px;
list-style-type: none;
}
#menu li a {
text-decoration: none;
color: #FFF;
}
#menu li a:hover {
color: aqua;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
#content {
padding: 260px 30px 30px 30px;
}
<div id="banner">
<h1>Supacool Website Title Here</h1>
</div>
<header>
<ul id="menu" class="clearfix">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
I'm having some troubles with Bootstrap columns, I have this code:
.vertical-line{
height: 100%;
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Also in http://jsfiddle.net/z55z3den/1/
So, what I wanna do is that the container with the class quote takes the height of its parent and then I could see the vertical line set in the container with the class vertical-line
Something like this:
I've been doing some research and I found something about flex properties in CSS but I haven't been able to make it works.
I hope you guys can help me.
Thanks in advanced.
The vertical line is same height with content, looks bigger because of margin of the last
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.quote {
position: relative;
}
.text {
padding-left: 20px;
}
.vertical-line{
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 40px);
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Add to class body the code:
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
May i suggest a different approach.
Just overwrite the default bootstrap styling for the <blockquote> element by using pseudo :before and :after elements. This will be a lot simpler. That way you would not need to load an extra image and you don't have to separate the elements into columns.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
blockquote {
position: relative;
border-left-width: 0px;
margin: 20px 40px;
font-style: italic;
color: #aaaaa5;
}
blockquote:before {
content:url('http://s18.postimg.org/6kmdp3w05/quotes.png');
/*content: "\201C";*/
color: #ddddd5;
position: absolute;
top: -92px;
left: -42px;
font-family: sans-serif;
font-weight: bold;
font-size: 128px;
}
blockquote:after {
content: "";
width: 2px;
position: absolute;
left: 0px;
top: 52px;
background-color: #ddddd5;
height: calc(100% - 58px);
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.
</p>
</blockquote>
</div>
</div>
</div>
I have a fixed header working as a menu. In this header, I want to show the logo (on the left) and the navigation (on the right). Both will be fixed as I scroll the page.
My navigation is already working. How can I place another DIV for my logo?
Also, how can I make all this content (logo and navigation) vertically align?
Preview: http://baskra.com/teste/teste.html
Here's what I tried, but it didn't work.
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 class="elementos">
<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="o-que-fazemos">
<a id="que"></a>
O QUE FAZEMOS?<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 class="como-fazemos">
<a id="como"></a>
<h1 class="como-fazemos-title">COMO FAZEMOS?</h1>
<p align="center"><img src="images/comofazemos.png" /></p>
</div>
<div class="quem-somos">
<a id="quem"></a>
QUEM SOMOS?<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 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 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;
}
logo {
padding:0;
border:0;
z-index:9999;
float:left;
}
.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;
}
.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;
}
.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;
}
.como-fazemos {
background-image: url('images/comofazemosFUNDO.png');
font-family: 'Source Sans Pro', sans-serif;
background-repeat: repeat-x repeat-y;
height:auto;
padding: 50px;
}
.como-fazemos-title {
font-family: 'Source Sans Pro', sans-serif;
font-size:80px;
text-align:center;
color:#FFF;
font-weight:900;
letter-spacing: 2px;
}
.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;
}
.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;
}
Add some styles to .menu ul
.menu ul {
list-style: none;
font-family: 'Source Sans Pro', sans-serif;
font-size:17px;
font-weight:bold;
/* add this */
position: fixed;
top: 0;
right: 0;
}
Better way is to use css table display to vertically align elements. Additionally menu will not be over the logo on smaller screens.
.login {
display: table-cell;
}
.menu ul {
display: table-cell;
vertical-align: middle;
width: 100%;
}
I need to arrange multiple div's like,
code:
<style>
#div1 {
background: yellow;
float:left;
position:relative;
width:177px;
}
#div2 {
background: green;
overflow: hidden;
position:relative;
width: 177px;
clear: left;
}
#div3 {
background: blue;
margin-left:180px;
position:relative;
}
#div4 {
position: relative;
}
</style>
<div id="div1">
<p><strong>DIV1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div4">
<div id="div2">
<p><strong>DIV2:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div3">
<p><strong>DIV3:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus. Donec venenatis, nulla et ultrices varius, ligula sapien pharetra dolor, eget vulputate justo felis ac leo. Morbi nec ullamcorper purus. Nulla mollis dignissim nisi in imperdiet. Phasellus convallis ante a felis tincidunt hendrerit. Praesent ipsum lorem, mollis sed dignissim non, consectetur non ipsum. Nam euismod, nisi ut ultricies aliquet, lorem erat pretium tortor, eget volutpat lectus tellus at magna. Curabitur a est ante, interdum faucibus ipsum. Mauris vitae tincidunt nisl. Praesent semper erat sit amet augue pharetra tristique. Morbi imperdiet, magna et malesuada interdum, massa ipsum venenatis est, sit amet egestas risus sem a purus.</p>
<p>Duis in sagittis justo. Quisque sit amet felis in tortor pharetra bibendum. Mauris eget purus sit amet magna vulputate ultricies. Nam non dignissim nisl. Suspendisse pretium malesuada dolor, non lacinia tellus imperdiet ullamcorper. Sed commodo placerat lacus eu bibendum. In id elit sed velit iaculis pulvinar et id elit. Cras sagittis porttitor tristique. Vivamus sed sodales lectus. Nulla interdum, mi sit amet volutpat feugiat, nunc erat consectetur neque, rutrum rutrum lorem nisl pellentesque magna. Maecenas mollis consequat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu mi pellentesque turpis faucibus vestibulum quis in ligula. Donec mollis tempor velit, eget vestibulum ante elementum ac. In gravida, purus sed faucibus rhoncus, arcu augue pretium nibh, ut faucibus justo ante vitae metus. Nunc sit amet mauris urna.</p>
</div>
</div>
Please help on this div3 to go top
Thanks in advance.
Based on the beginning of your question :
I need to arrange multiple div's like,
[ div1 ] [ div3 ]
[ div2 ] [ "" ]
I simply ignored the code you supplied. I noticed you wanted a 2 columns system.
Here's a jsfiddle of my suggestion.
Code :
.col {float:left; border:2px solid red;}
.row{width:100px;border:1px solid blue; margin:3px;}
<div class="col">
<div class="row">row1</div>
<div class="row">row2</div>
</div>
<div class="col">
<div class="row">row3</div>
<div class="row">row4</div>
</div>
Would that work for you? If not, why?
Do you mean something like this fiddle?
Tested on Win7 in IE8, IE9, Opera 11.50, FF4, FF5, Safari 5, Chrome 12.
Only IE7 fails. For that you need an extra conditional stylesheet like in this fiddle:
<!--[if lt IE 8]>
<style type="text/css">
body {
position: relative;
}
#div3 {
position: absolute;
margin-left: 0;
top: 0;
}
</style>
<![endif]-->
If you really want it cross browser compatible, without consitional stylesheet for IE7, then I suppose there is no way around partially absolute positioning. See this demo fiddle.
This worked, Thanks NGLN, Your suggestion helped me a lot.
<style>
#div1 {
background: yellow;
float:left;
width:177px;
}
#div2 {
background: green;
overflow: hidden;
width: 177px;
clear: left;
float: left;
}
#div3 {
background: blue;
margin-left: 185px;
position: relative;
}
#div4 {
display: inline;
}
</style>
<div id="div1">
<p><strong>DIV1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div4">
<div id="div2">
<p><strong>DIV2:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus.</p>
</div>
<div id="div3">
<p><strong>DIV3:</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante leo. Fusce at lacus risus. Fusce felis tortor, vehicula ut vulputate sit amet, ultricies sit amet risus. Donec venenatis, nulla et ultrices varius, ligula sapien pharetra dolor, eget vulputate justo felis ac leo. Morbi nec ullamcorper purus. Nulla mollis dignissim nisi in imperdiet. Phasellus convallis ante a felis tincidunt hendrerit. Praesent ipsum lorem, mollis sed dignissim non, consectetur non ipsum. Nam euismod, nisi ut ultricies aliquet, lorem erat pretium tortor, eget volutpat lectus tellus at magna. Curabitur a est ante, interdum faucibus ipsum. Mauris vitae tincidunt nisl. Praesent semper erat sit amet augue pharetra tristique. Morbi imperdiet, magna et malesuada interdum, massa ipsum venenatis est, sit amet egestas risus sem a purus.</p>
<p>Duis in sagittis justo. Quisque sit amet felis in tortor pharetra bibendum. Mauris eget purus sit amet magna vulputate ultricies. Nam non dignissim nisl. Suspendisse pretium malesuada dolor, non lacinia tellus imperdiet ullamcorper. Sed commodo placerat lacus eu bibendum. In id elit sed velit iaculis pulvinar et id elit. Cras sagittis porttitor tristique. Vivamus sed sodales lectus. Nulla interdum, mi sit amet volutpat feugiat, nunc erat consectetur neque, rutrum rutrum lorem nisl pellentesque magna. Maecenas mollis consequat fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu mi pellentesque turpis faucibus vestibulum quis in ligula. Donec mollis tempor velit, eget vestibulum ante elementum ac. In gravida, purus sed faucibus rhoncus, arcu augue pretium nibh, ut faucibus justo ante vitae metus. Nunc sit amet mauris urna.</p>
</div>
</div>