I'm currently coding my design portfolio and have encountered a problem with the layout.
Here is a link to my website so you can see the problem: http://www.mozazdesign.co.cc/
Basically, I want the contact me and the icons below to appear under the header and navigation. I have put them in separate containers but for some reason where ever I place the contact me div the header follows.
Here's the code:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
</div><!--end logo-->
<div id="nav">
<ul id="main_nav">
<li>home</li>
<li>about me</li>
<li>gallery</li>
<li>blog</li>
<li>contact</li>
</ul><!--end main nav-->
</div><!--end nav-->
</div><!--end header-->
<div id="main_content">
<div id="contact">
</div><!--end contact"-->
</div><!--end main content-->
</div><!--end container-->
</body>
body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
width: 960px;
}
#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px; <!--check-->
}
#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
width: 960px;
margin-top: 250px;
}
#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}
I would really appreciate any help! Thanks in advance! :)
One of the problems you had was that your floated elements were not being contained inside the parent element (#header). You can use overflow:auto; on the parent element to contain floated elements inside. But, for a header like this, I usually opt to just position everything absolutely, since the content is not dynamic.
I am not sure if this is exactly what you are looking for, but this CSS will make it look like what you are looking for, I think.
body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}
#nav a {
text-decoration: none;
color: white;
}
#container {
margin: 0 auto;
width: 960px;
}
#header {
height:200px;
position:relative;
}
#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}
#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}
#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}
#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}
#main_content {
}
#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
Looks like you need clear: both on your main_content div.
I think an
#header {
overflow:hidden
}
or anything else that clears the floats of div#nav and div#logo should help.
It take 2 steps:
1) Move <div id="contact">...</div><!--end contact"--> into <div id="logo">...</div><!--end logo-->.
2) Change the #contact style to:
background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative;
float: right;
top: 200px;
You need to set position: relative, otherwise it is not working.
Related
I'm creating a page that looks like this:
Here is the code
body { min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#headlogo{
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;}
#header {
padding: 0;
background-color: #1565C0;
}
#header .section {
margin: 0 auto;
padding: 0;
width: 900px;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
background: url(./images/headernav.gif) no-repeat top right;
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color:#DEDEDE;
}
#body .section {
margin: 0 auto;
min-width: 800px;
width: 800px;
overflow: hidden;
background-color:#FFFFFF;
padding: 60px 100px 50px 100px;
min-height: 50vh
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
}
#footer .section {
margin: 0 auto ;
padding: 20px;
width: 800px;
overflow: hidden;
};
<div id="header">
<div class="section">
<img src="./images/headerlogo.png" width="340" height="110" alt="" title="">
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
The CSS is available here:
http://jsfiddle.net/85L448ds/
But I don't know how to make the page more responsive to sizing inconsistency. I want the page to default to 800 pixels wide, except where there is wide content or the browser window is too small (it should have a gray background outside this area). Whereas the height should be such that the height should not be less than the browser height.
In other words, I'd like it to work something like:
Width = 800
If Width > Window_Width then
Width = Window_Width
If Content_Width > Width then
Width = Content_Width
Whereas height should be the greater of: Content_Height and Windows_Height.
Note: Content_Width/Height cannot be predicted because I have a forum where the table structure is sometimes oversize to accomodate large images.
I've tried setting the CSS min-width property to 800, but that makes the default width 100%.
I thought height would be easy, just need to set the body to 100% height or 100vh, but that seems to have no effect...
I believe CSS Media Queries will resolve your problem.
Of course it is possibly just one of the solutions, but it is purely CSS and really easy to manage.
For more information about media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Using media queries happens like in this following example, where your #headLogo is set to change its properties once the viewport width is less or equal to 768px:
#media (max-width: 768px)
{
#headLogo {
text-align: center;
max-width: 300px;
}
}
Run snippet in full page and then play with window size after reduce the size of window your menu will hide and one button you can see. now show menu on button click.
If you run snippet so at first time you can see button because your
window size is < 768px if you want see menu then see result in full page
for responsive site use width in % not in px.
and you can also use bootstrap for that.
body {
min-height: 50vh;
line-height: 1;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.smallButton{
display:none
}
#headlogo {
position: absolute;
top: 12px;
margin: 0 auto;
font-weight: bold;
}
#header {
padding: 0;
background-color: #1565C0;
width:100%;
height: 90px;
}
#header .section {
margin: 0 auto;
padding: 0;
overflow: hidden;
}
#header .section ul {
display: inline-block;
float: right;
margin: 0;
overflow: hidden;
padding: 50px 0 10px;
}
#header .section ul li {
display: inline-block;
float: left;
list-style: none;
margin: 0 10px;
padding: 0;
}
#header .section ul li a {
color: #fff;
display: inline-block;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 8px;
text-align: center;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.03em;
}
#header .section ul li a:hover {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected {
background: url(./images/headernavselected.gif) no-repeat top right;
}
#header .section ul li.selected a {
background: url(./images/headernavselected.gif) no-repeat top left;
color: #E3F2FD;
}
#body {
margin: 0 0;
background-color: #DEDEDE;
width:100%
}
#footer {
background: #1565C0;
margin: 0;
padding: 0;
width:100%;
}
#footer .section {
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
#media (max-width: 768px)
{
#header .section ul {
display:none
}
.smallButton{
display:block;
position: absolute;
right: 0;
top: 32px;
}
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 500px;
height: 700px;
position: relative;
}
}
#media (min-width: 768px){
#body .section {
margin: 0 auto;
overflow: hidden;
background-color: #FFF;
width: 800px;
height: 700px;
position: relative;
}
}
<div id="header">
<div class="section">
<a href="index.html" id="headlogo">
</a>
<button class="smallButton">---</button>
<ul>
<li class="selected">
Home
</li>
<li>
Store
</li>
<li>
Products
</li>
<li>
Forum
</li>
<li>
Support
</li>
</ul>
</div>
</div>
<div id="body">
<div class="section">
Lorem ipsum
</div>
</div>
<div id="footer">
<div class="section">
© copyright 2023 | all rights reserved.
</div>
updated fiddle
You don't actually need media queries for that
html,
body {
width: 100%;
height: 100%;
}
will make body occupy all available space in window. It will shrink and expand with window re-size.
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I have this kind of complex set up with divs and links. Anyway, the logo in the top of left of my page is supposed to change when you hover over it, and it does. However, it also changes if your mouse goes anywhere in the top section of the page (outlined in red on the image)
Also when I click on the logo, the link doesn't work. I think it may have to do with the way I have the divs set up, but i'm not sure.
I'm still kind of new at all of this, and I'm a little overwhelmed at figuring out this issue. If you can help, I would appreciate it.
Below is my html, css, and an image to help show you what I'm talking about.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playing with backgrounds</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="topheader">
<a href="index.html">
<div id="logo">
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
</div>
<div id="welcome">
<h1>Welcome</h1>
<h2>
To
<span class="gold"> Promise Land Partners</span></h2>
</div>
<div id="bottom_bar">
<p>COPYRIGHT DAVIDMORRIS © 2014 | NEWSLETTER | FACEBOOK
<span class="right">DESIGN: HANGING OUT</span>
</p>
</div>
</div>
</body>
</html>
This is my CSS
#charset "utf-8";
/* CSS Document */
body {
background-image: url(img/dot.png), url(img/background.jpg);
background-repeat: repeat, no-repeat;
background-position: top left, center center fixed;
background-size: auto, cover;;
margin: 0px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#topheader {
height: 135px;
width: 100%;
overflow: hidden;
position: relative;
background-image: url(img/headerbar.png);
background-repeat: repeat-x;
}
#logo {
background-image:url(img/PLP.png);
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
#logo:hover, #logo:active {
background-image:url(img/PLP_pushed.png);
}
#navigation {
background-image: none;
background-position: top left;
padding-left: 180px;
}
#bottom_bar {
background-image:url(img/bottom_bar.jpg);
position: fixed;
bottom: 0;
height: 27px;
width: 100%;
color: white;
}
#bottom_bar p {
text-align: left;
padding: 4px;
margin: 0;
}
.right {
float:right;
}
#welcome {
background-image: url(img/welcomepanel.png);
background-repeat: no-repeat;
position: relative;
left: 0;
top: 70px;
height: 261px;
width: 100%;
padding-top: 10px;
padding_left: 10px;
margin: 0;
}
h1 {
color:white;
padding-left: 90px;
font-size: 6em;
margin: 0;
margin-top: 8px;
}
h2 {
color: white;
font-size: 4em;
padding-left: 20px;
margin: 0;
line-height: .65em;
}
.gold {
color: #ee9f00;
font-size: .75em;
margin: 0;
}
a {
text-decoration: none;
color: white;
}
a:visited {
color: #c88601;
}
a:focus {
color: #ee9f00;
}
a:hover {
color: #ee9f00;
}
a:active {
color: c88601;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:visited {
color: white;
}
#navigation a:focus {
background-color: #ee9f00;
}
#navigation a:hover {
background-color: #ee9f00;
}
#navigation a:active {
background-color: #ee9f00;
}
You have your CSS set to change the image when you hover over #logo and #logo is set to width: 100%; Try changing the width of #logo or, if that breaks your style, add a child div to #logo in which you can change the background image.
See this fiddle for an example: http://jsfiddle.net/QDgVy/
HTML
<a href="index.html">
<div id="logo_container">
<div id="logo"></div>
<div id="navigation">
NEWS<br />
ABOUT<br />
VOLUNTEER<br />
DONATE<br />
CONTACT US
</div>
</div>
</a>
CSS
#logo_container {
background-repeat: no-repeat;
background-position: top left;
height: 100px;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#logo {
background-image:url(...);
width: 100px;
height: 100px;
display: block;
float: left;
}
#logo:hover, #logo:active {
background-image:url(... );
}
I don't know what happened to my navigation bar and its links. They do not show (Safari 6.0.5). I have tried to adjust the height and position of my header and nav containers. I know the answer is righht there in front of me but I don't see it. I haven't found any ideas on my web searches. Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MS Office Skills</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img class="pctr" src="images/lily-pads.jpg" alt="Admin extraordinaire" />
<!-- another img class MAY GO HERE. but for now, nothing -->
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Read Our Blog</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* BODY AND CONTAINER
---------------------------------*/
body {
font-size: 76%;
<!-- background-image: url(../images/black.jpg); -->
<!-- background-image: url(../../CGT136as/week-07hw/website/images/bg-strip-body.jpg); -->
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
}
#container {
overflow: hidden;
width: 100%;
margin: 0 auto 0 auto;
}
/* HEADER AREA
---------------------------------*/
#header {
position: absolute;
left:0;
width: 100%;
height: 190px;
padding: 0px;
margin: 0px;
background-color: #0d0d0d;
}
.pctr {
position: relative;
top: 0px; <!-- 30px; -->
left: 0px; <!-- 0px; -->
z-index: 20;
}
/* MAIN NAVIGATION
---------------------------------*/
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0px;
margin: 0px;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
color: #ff0;
border-bottom: 2px dotted #fff;
}
Your Header Div is ending up on top of the navigation div (You can see it by setting your header's background to be transparent). Either add a z-index: -1 rule to the header div.
Or apply the position: absolute; rule to the container div instead (Which is probably what you wanted).
The main idea is to have a color-specific menu throughout the whole site. In order to do this I've made a different style for each of the 6 main pages. On every main page there is a submenu.
Here's what I want it to look like:
And here is what it looks like:
As you can see I'm having a hard time setting the submenu in place. It seems that there is some weird gap between that and the main menu. I placed the * margin/padding/border 0 rule at the beginning of the css so i'm still at a loss.
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>DDS / Om skolen</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<!--BODY-->
<body>
<!--WRAPPER-->
<div id="wrapper">
<!--HEADER-->
<div id="header">
<div id="headlogo">
<h1>Den Demokratiske Skole</h1>
</div>
</div>
<!--MENUER-->
<div id="menu">
<!--NAV ABC-->
<div id="navbara">
</div>
<!--NAV ZXY-->
<div id="navbary">
</div>
<ul id="nav">
<!--INBOUND-->
<li>OM SKOLEN</li>
<li>OPTAGELSE</li>
<li>KONTAKT</li>
<li>MERE INFO</li>
<!--OUTBOUND-->
<li>FOREDRAG</li>
<li>PRESSE</li>
</ul>
</div>
<div id="navmarka">
</div>
<div id="subnav">
<ul>
<li>SKOLEN</li>
<li>VÆRDIER</li>
<li>ANSATTE</li>
<li>BESTYRELSEN</li>
<li>VENNEKREDS</li>
<li>INTRANET</li>
</ul>
</div>
<!--CONTENT-->
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#charset "UTF-8";
/*OVERALLS*/
* {
margin: 0px;
border: 0px;
padding: 0 px;
}
h1 {
font-size: 10px;
text-indent: -99999px;
}
/*SINGLES*/
#wrapper {
margin-right: auto;
margin-left: auto;
width: 780px;
margin-top: 20px;
height: auto;
}
#header {
width: 780px;
height: 84px;
float: left;
margin-bottom: 10px;
}
#headlogo {
background-image: url(../images/headerlogo.png);
height: 84px;
width: 215px;
float: left;
}
#menu {
height: 30px;
width: 780px;
float: left;
}
#bars {
float: left;
height: 10px;
}
/*navbarABC*/
#navbara {
height: 10px;
width: 381px;
float: left;
margin-right: 26px;
background-color: #3FA9F5;
}
#navbarb {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbarc {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbard {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
#navbare {
height: 10px;
width: 380px;
float: left;
margin-right: 26px;
background-color: #3CF;
}
/*navbarZXY*/
#navbarz {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbarx {
height: 10px;
width: 154px;
float: left;
background-color: #3CF;
}
#navbary {
height: 10px;
width: 154px;
float: left;
background-color: #000;
}
#nav {
float:left;
padding: 0px;
width: 780px;
font-size: 14px;
font-weight: 100;
height: 10px;
margin-top: 5px;
}
#nav ul{
list-style-type:none;
}
#nav li{
display:inline;
margin-right: 21px;
}
#nav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#navmarka {
height: 1px;
width: 83px;
background-color: #3FA9F5;
float: left;
margin-right: 697px;
}
/*subnav*/
#subnav {
float:left;
width: 200px;
font-size: 12px;
height: 100px;
margin-top: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #3CF;
}
#subnav ul{
list-style-type:none;
}
#subnav li a{
padding: 0px;
}
#subnav li a{
text-decoration: none;
font-family: Helvetica;
color: #000;
}
#footer {
clear: both;
height: 20px;
width: 780px;
}
Your <div id="subnav">...</div> has a margin-top: 20px; set
Remove that, the gap disappears.
EDIT;
Just noticed on your image you have a gap between the top line and the sub navigation too, you can achieve this by adding padding-top: 20px;
Remove the margin-top:20px in #subnav. It overrides the margin:0px.
It's because of your margin-top. Try margin-top:10px, or 5px to suit your need.