I want the navigation bar to be at the bottom of the window when the page loads (but it will stick to the top while scrolling so I can't make its position fixed). The only thing I figured out is making the background div height 100vh minus navigation bar height but it creates that weird white padding instead of bringing the navigation up.
Also, how can I center vertically elements in my .navigation (and in the .tester too)? The logo has to be on the left side while navigation must be on the right.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:bold;
}
.header-wrapper {
background-image: url("images/backgrounds/typography.jpg");
background-size:cover;
background-position:center;
min-height:calc(100vh - 6em - 100px);
text-align:center;
padding-top:6em;
margin:0 auto;
position:relative;
}
.tester{
position:absolute;
width:100%;
display:flex;
bottom:50px;
margin: auto;
align-items: center;
justify-content: center;
}
.tester a{
margin-left:1em;
margin-right:1em;
opacity: 0.75;
}
.tester a:hover{
opacity:1;
}
.slider-buttons {
position:absolute;
max-width:1170px;
}
.typography {
bottom: 100px;
left:auto;
}
.navigation {
max-width:1170px;
margin:0 auto;
height:94px;
background-color:white;
bottom:0;
}
nav {
float:right;
text-transform:uppercase;
}
nav a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
}
nav #home:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover {
color:white;
}
nav #home:hover {
background-color:#dfbb42;
}
nav #menu2:hover {
background-color:#c43434;
}
nav #menu3:hover {
background-color:#508b61;
}
nav #menu4:hover {
background-color:#428d9e;
}
nav #menu5:hover {
background-color:#575fbd;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Lorem ipsum sit dolor amet</h1>
<div class="tester">
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
</a>
<a href="">
<div class="typography">
<img src="images/slider-buttons/typography/typography-icon.jpg">
<img src="images/slider-buttons/typography/typography-text.jpg">
</div>
</a>
</a>
</div>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="css/images/logo.png" alt="Logo" id="logo">
</div>
</section>
I guess that can only be done with JS, so you can change the nav position based on the window offset.
you can better use jquery to initially hide the nav-bar when the page loads using Jquery and show it as the user scrolls down the page.
here is the example:
$(document).ready(function(){
$(window).scroll(function(){
$('#navbar').fadeIn("slow");
setTimeout(function(){
if($(window).scrollTop()<10){
$('#navbar').fadeOut("slow");
}
},100)
})
})
#navbar{
position:fixed;
top:0px;
width:100%;
height:100px;
background:#eeeeee;
color:white;
text-align:center;
display:none;
}
#content{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar"><h1>lorem ipsum</h1></div>
<div id="content"></div>
Related
I have a row split in 4 columns on a footer section, in the last column to the right I want to add something like the picture attached, but I want to preserve the look of the image and text together along all screens sizes, with what I have only works for smaller screens, and the wider the screen gets, the image and the text separate each other apart too much. How can I achieve this?
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
bottom:0;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
}
<div class="wrapper">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
you can simply set the display of 'image' and the 'text' element to :inline
or chage the < p > tag to < span >,
because < p > tag takes the whole line and they couldn't take place together!
but < span > tag is an inline element which takes the content width (and not the screen width)
here is a useful explanation about "display" property.
.wrapper {
display: block;
position:absolute;
right:0;
bottom:0;
text-align:center;
margin:0 auto;
}
.footer {
display: inline;
}
.talk{
font-size:40px;
color:black;
}
.logo{
height: 150px;
width: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<span class="footer talk">Big Text</span>
<img class="footer logo" src='http://via.placeholder.com/140x100'>
</div>
</body>
</html>
You can try This Code.
I'am add some media queries and some div to in html page
Html
<div class="wrapper">
One Columns
</div>
<div class="wrapper">
two Columns
</div>
<div class="wrapper">
three Columns
</div>
<div class="wrapper">
<div class="A">
<p class="footer talk">Big Text</p>
<img class="footer-logo" src='http://via.placeholder.com/140x100'>
</div>
</div>
CSS
.wrapper {
position:relative;
text-align:center;
margin:0 auto;
width:25%;
float:left;
}
.footer {
font-size:40px;
color:black;
}
.talk {
position:absolute;
text-align:left;
width:50%;
float:left;
}
.footer-logo {
vertical-align: bottom;
float:right;
height:150px !important;
width:50%;
float:right;
}
.A{
width:100%;
}
#media (max-width:525px){
.A{
width:100%;
}
.footer-logo {
width:20%;
float:right;
}
.talk {
width:20%;
float:left;
font-size:28px;
}
}
I'm new to HTML / CSS. I want to build a web site but I stumbled across a problem.
My divs inside my "content div" have a blank space at the top from the line div, and I can't seem to figure out what is causing the problem. Can someone please help? I will much apreciate it.
Thank you!
<head>
<meta charset="utf-8">
<title>Vlad Olar</title>
<style type="text/css">
body {
padding:0;
margin:0;
font-family:Lato, Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background-color:#D8DCE1;
}
.clear {
clear:both;
}
.fixedwidth {
width:960px;
margin:0 auto;
padding:0 0;
}
#topbar {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#front {
height: 360px;
width: 100%;
background-color:#D8DCE1;
}
#line {
height:10px;
width:100%;
background-color:#4C4C4C;
}
#foto {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:103px;
}
#gaming {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:right;
position:relative;
top:-55px;
margin-right:103px;
}
#design {
height:120px;
width:120px;
background-color:#4C4C4C;
border-radius:60px;
z-index:3;
float:left;
position:relative;
top:-55px;
margin-left:198px;
}
#content {
margin:0;
padding:0;
}
#fotocontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#designcontent {
background-color:#D1A366;
height:500px;
width:320px;
float:left;
}
#gamingcontent {
background-color:#A48251;
height:500px;
width:320px;
float:left;
}
#footer {
background-color:#4C7585;
height: 40px;
width: 100%;
}
#container {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
</div>
</div>
<div id="front">
</div>
<div id="line">
<div class="fixedwidth">
<div id="foto">
</div>
<div id="design">
</div>
<div id="gaming">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="content">
<div class="fixedwidth">
<div id="fotocontent">
</div>
<div id="designcontent">
</div>
<div id="gamingcontent">
</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<div class="fixedwidth">
</div>
</div>
</div>
</body>
As #HiddenHobbes wrote you have the problem because of #foto, #design and #gaming are pulling down .clear div (remove top: -55px; and you will see it).
If you do not want to recalculate margins you can wrap those block in some wrapper with position: absolute; to prevent pulling down behaviour on next div.
In your html
<div id="line">
<div class="fixedwidth">
<div class="foowrapper">
<div id="foto"></div>
<div id="design"></div>
<div id="gaming"></div>
</div>
</div>
</div>
And in your css
.foowrapper {
position: absolute;
width: 100%;
}
.fixedwidth {
position: relative;
}
Fiddle demo
I know your new to html and css but you realy need to make your css in a different file, to do this use <link rel="stylecheet" href="style.css">
Also you should start every html file with this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
(content)
</body>
</html>
But to anwser your question:
"My divs inside my "content div" have a blank space at the top from the line div"
This can easly be solved by given the div a margin-top:-(x)px;
I made a header with a nav inside of it and set the width to 100%. I kept it out of the container so only the header can take the entire page and the other content will be 960px. Now my site title and nav are too much to the left and i tried to center it and match the 960px container with margin:0 auto but that didn't work. How can i get my site title to match right where the 960px container starts and the nav as well? I want to space the nav more to the right.
jsfiddle - http://jsfiddle.net/wphkyhw8/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="main_header">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="container">
<section class="main_content">
<article>
first article
first article
first article
first article
first article
first article
</article>
</section>
<footer>
copyright 2014
</footer>
</div> <!-- end of container -->
</body>
</html>
*{
margin:0;
padding:0;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
border:1px solid black;
margin:0 auto;
}
.main_title{
float:left;
padding:20px;
font-size:25px;
}
.main_header{
background-color:#000000;
color:#ffffff;
width:100%;
height:80px;
}
.main_nav{
float:left;
}
.main_nav ul li{
float:left;
padding:30px 10px;
}
.main_nav ul li a{
text-decoration:none;
color:#ffffff;
}
You could simply achieve that by wrapping the content of the header by an additional div having a class of .container
Example Here
<header class="main_header">
<div class="container">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<!-- Navigation -->
</nav>
</div>
</header>
It is better to use another class name to apply the border to the content container.
.container {
width:960px; margin:0 auto; /* Removed the border from this selector */
}
<div class="container border"> <!-- Content --> <div>
.border { border:1px solid black; /* Added here */ }
Is this what you're trying to do:
http://jsfiddle.net/wphkyhw8/4/
.main_header{
background-color:#000000;
color:#ffffff;
width:960px;
height:80px;
margin: 0 auto;
}
I have a footer div that is just a solid colour that I would like to sit at the bottom outside of my container DIV which is called 'mainhome'. I would like it to stretch the entire site. It just keeps sitting on top of my banner - I'm getting lost in the code now so maybe i have just missed something small?
Thank you in advance
MY 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/portfolio.png" /></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/getintouch.png" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" /></div>
</div></div>
<div class="footer"></div>
</body>
</html>
MY CSS
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
margin-top:20px;
}
.footer {
width:100%;
height: 61px;
background-color:#334d5c;
clear:left;
}
It doesn't look like .nameimage needs to be absolutely positioned, but it depends on what you want it to do. Rough example: http://codepen.io/anon/pen/oAbJy.
likely the easiest thing to do, if you ALWAYS want that to be at the very bottom is just give it a fixed position. Add the following to your CSS for the footer. (you may also have to set height and width on the body to 100%)
position: Absolute;
bottom: 0px;
I have a html page I'm working on. I have a div called "featuredcontent" that I'm going to add an N number of elements with class "item" to. I want the featuredcontent box to scroll horizontally when I exceed the space in the layout. Sort of like iTunes does their songs. My problem is when I try to do this and define the boxes to be a certain width they don't expand properly. Here's my rough draft of the code.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
* {
padding:0px;
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
#container {
width:990px;
margin-left:auto;
margin-right:auto;
}
#header {
margin-top:20px;
text-align:left;
overflow: auto;
}
#featured {
width: auto;
float: left;
text-align: left;
}
#navbar {
padding-top:5px;
}
#navbar a {
color:#000;
padding-right:40px;
font-weight:bold;
text-decoration:none;
font-size:20px;
}
#navbar a:hover {
text-decoration:underline;
}
#logo {
width:290px;
height:250px;
float:right;
vertical-align:50%;
background:url(logo.jpg);
}
#main {
margin-top: 30px;
}
#mainfeature {
overflow:auto;
white-space:nowrap;
}
.item {
width:150px;
height:300px;
margin-right:10px;
color:#0FF;
display:inline;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="featured">
<img width="700" height="225" src="#" />
<div id="navbar">LinkLinkLinkLink</div>
</div>
<div id="logo"></div>
</div>
<div id="main">
<div id="mainfeature">
<div class="item"> asdf</div>
<div class="item"> adsf</div>
<div class="item"> adf</div>
<div class="item"> ad f</div>
<div class="item"> adsdfewsgewt</div>
</div>
<div id="secondaryfeature"></div>
<div id="socialbar"></div>
</div>
<div id="footer"></div>
</div>
</body>
I think its navbar that needs to scroll. It also needs a width:
#navbar {
width: 990px;
padding-top:5px;
overflow-x: auto;
}
If you want to have a custom scrollbar, I think you can look to jScrollPane. (http://jscrollpane.kelvinluck.com/)
The CSS property "overflow-x" is a good answer, but I hate the default scrollbars. ;)
Give that a try:
#featured {
overflow-x: scroll;
}