Hey,
I have a big problem with my container-sketch. How can I realize this ? When I set the width from the two navigations (blue container) there are under the logo (red container). The two navigation will run across the screen, right next to the logo. If I resize the browser window, the two navigations should NOT slide under the logo. Has anybody a example for me ?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New</title>
<style type="text/css">
.logo {
float: left;
width: 260px;
height: 50px;
background: green;
}
.nav-main {
background: red;
}
.nav-sub {
background: blue;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
.logo
</div>
<div class="nav-main">
.nav-main
</div>
<div class="nav-sub">
.nav-sub
</div>
</div>
</body>
.header{
min-width:320px;
}
check example
Try adding width to the nav-main and nav-sub
See http://jsbin.com/isuxu4 for a demo
Related
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
I have a questions about a horizontal navigation bar. I want to create a page with an image as header (height:100px), a horizontal navigation bar and finally the content area ( height:768px). I wonder why the navigation bar taks place in the content area (that means that the content area gets smaller than 768px). How can I avoid this behaviour? Instead, I'd like to shift the content area downwards about the size of the navigation bar.
This is my css code:
* {
margin:0;
padding:0;
}
body {
background:#FFFFFF;
}
#frame {
margin: auto;
width: 1024px;
height: 768px;
}
#header {
width:100%;
height:100px;
background-image:url(image.jpg);
}
#navigation {
width: 100%;
float: left;
list-style: none;
background: #f2f2f2;
}
#navigation li {
list-style: none;
display: inline;
float: left;
}
#navigation a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#navigation a:hover {
color: #c00;
background-color: #fff;
}
#content {
background: #EBF7FF;
width: 1024px;
height:768px;
text-align: justify;
}
and this is the html code:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="frame">
<div id="header">
</div>
<ul id="navigation">
<li>text1</li>
<li>text2
<li>text3</li>
<li>text4</li>
</ul>
<div id="content">
<font size="+3">Title</font>
<br>
<br>
Content...
<br>
<br>
</div>
</div>
</body>
</html>
If you want #navigation to display as float, you may add clear:both to your #content.
#content {
background: #EBF7FF;
width: 1024px;
height:768px;
text-align: justify;
clear:both;
}
But to my mind better solution would be displaying it as block and li as inline-block or display it as table and li as table-cell
You specify a width of 100% for #navigation which is contained in a container #frame holding the content. So the #navigation takes the width of its container, thus the same width as the rest of the content inside that container because the container takes exactly the width required by the content inside.
You place that navigation inside the content container, so obviously it has to take room in there. If you want to avoid that simply put the navigation above the content container:
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="header">
<ul id="navigation">
<li>text1</li>
<li>text2
<li>text3</li>
<li>text4</li>
</ul>
</div>
<div id="frame">
<div id="content">
<font size="+3">Title</font>
<br>
Content...
</div>
</div>
</body>
</html>
Compare that fiddler.
you'r navigation must occupy whole the with available and has height set to a value.set display:table for your navigation so it's height grows to it's content like this:
#navigation{
display:table;
}
check DEMO
That's because #navigation it's floating above #content.
Try adding this to force #content to render below the navigation:
#content {
clear:both;
}
When you do this, you don't have to bother what is coming after your navigation.
#navigation:after {
clear:both;
}
I am trying to build a two columned layout with a sidebar that always stays on the left side of the page with a main content area that is centered, and when the window is resized, the centered content will eventually bump up against the nav bar, but never move any further left than where it is when they touch (which would be left: 150px).
Can someone help me out?
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
body,td,th {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #000;
}
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
}
#nav {
position: fixed;
top: 0px;
left: 0px;
width: 150px;
height: 10000px;
background-color: #D61D21;
text-align: right;
}
#nav a:link {
color: #FFF;
text-decoration: none;
}
#nav a:visited {
color: #FFF;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
text-decoration: underline;
}
#main {
width: 810px;
height: 810px;
margin: 0px auto;
}
and here is the html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="main">
ENTER CONTENT HERE
</div>
</body>
</html>
Any help is greatly appreciated!
Do this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nick Passaro Designs</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<img src="assets/marklogo.jpg" width="150" height="97" border="0" alt="Nick Passaro Designs">
<p>PORTFOLIO </p>
<p>LOGOS </p>
<p>PRINT </p>
<p>WEB DESIGN </p>
<p>PHOTOGRAPHY </p>
<p>CONTACT </p>
</div>
<div id="wrapper">
<div id="main">
ENTER CONTENT HERE
</div>
</div>
</body>
</html>
CSS:
#wrapper{
margin-left: 150px;
}
What you do is create a wrapper div around your main div and make that wrapper div have a left-margin of 150px so that it's side by side with the nav bar. Now all your resizes inside the main div should be limited to within the wrapper.
A neat little trick I just learned is making your #content position: relative; and then make all child elements inside it position: absolute; that way all child elements are absolute to your content area and the content will resize to any resolution. Saves me so loads of time and i can't believe how much time I used to waste laying dynamic sites out.
Hope this does something for you.
I am having two problems. The first one, is that I am getting a break in FF, IE and chrome between the top img and the logo. The second problem only appears in IE and what happens is there is a border around the logo. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2E Network - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="Images/top_page.png" width="963" height="29"><div id="logo"><img src="Images/logo.jpg" width="921" height="272" alt="Logo" longdesc="/index.php"></div>
</div>
<div id="main">
</div>
<div id="footer"><img src="Images/bottom_page.png" width="963" height="50">
</div>
</div>
</body>
</html>
Seperate CSS style Sheet
body {
background-image: url(Images/bkg.png);
background-repeat: repeat-x;
}
#wrapper {
width: 963px;
margin: auto;
}
#main {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logo {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logoimg {
margin-left: 15px;
}
Check the current page here
to fix the gap make the top image to display:block;
and the border
you can see it here
http://www.jsfiddle.net/CcvTD/2/
edit:updated so the borders are removed too
This will get rid of the border:
#logoimg img {
border:0px;
}
To fix the gap, try:
#header img, #logo {
margin:0px;
}