I'm new to CSS and this is just some training stuff. I created a basic layout and I add a navigation bar with some a elements. The problem is that you can't see the full a elements. I tried to change the margin-top property to 0 but nothing changed. How could I solve this problem?
#container{
width:100%;
height:100%;
position:absolute;
}
#Header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
background-color:#FFF1D5;
}
#nav
{
position:absolute;
top:20%;
left:0;
width:100%;
height:5%;
background-color:#660033;
text-align:center;
}
#nav ul li{
text-decoration:none;
display:inline-block;
margin-left:25px;
margin-right:25px;
margin-top:0;
}
#nav ul li a{
font-size:25px;
color:white;
position:center;
text-decoration:none;
display:inline-block;
}
#leftnav
{
position:absolute;
left:0;
top:25%;
width:20%;
height:55%;
background-color:yellow;
}
#body
{
position:absolute;
top:25%;
left:20%;
width:60%;
height:55%;
background-color:silver;
}
#rightnav
{
position:absolute;
top:25%;
right:0;
width:20%;
height:55%;
background-color:yellow;
}
#Footer{
position:absolute;
bottom:0;
left:0;
height:20%;
width:100%;
background-color:green;
}
edit :
`<!DOCTYPE html>
<html>
<head>
<link href = "üben_css.css" rel = "stylesheet">
<title> K </title>
</head>
<body>
<div id="container">
<div id="Header"> Das ist der Header </div>
<div id="nav">
<ul>
<li>Home</li>
<li>Produkte </li>
<li>Kontakt </li>
</ul>
</div>
<div id="body"> Das ist der body </div>
<div id="leftnav"> Linke Navigation</div>
<div id="rightnav"> Rechte Navigation</div>
<div id ="Footer"> Footer</div>
</div>
</body>
</html>`
If I am understanding your question then:
#Header{
position:absolute;
top:0;
left:0;
width:100%;
height:20%; /* This is set to 20%, try increase it */
background-color:#FFF1D5;
}
Since your elements have the position attribute you can assign them the z-index attribute to control which one goes on top. Also, I personally wouldn't have that many elements with the position: absolute on there. It'll be a mess of work if you decide you want to move one of them. Try assigning some of them with position: relative.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I'm currently trying to fully understand how all the positioning code works and to make everything responsive in my website. I've come across a rather irritating issue.
THE ISSUE
-I have a div that is positioned relative (id: news_content) and is within a div that is positioned absolute (id: page). When I try to move news_content using positioning commands top and left, left is the only one that is reacting. While the top command isn't moving news_content at all.
/*Global*/
body {
margin:0;
padding:0;
}
div {
margin:0;
padding:0;
top:0;
left:0;
bottom:0;
right:0;
}
table {
margin:0;
padding:0;
border-spacing:0;
}
/*Global Divs*/
#page {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
#nav_main {
background-color:black;
width:100%;
height:14%;
position:fixed;
z-index:0;
}
/*Navigation*/
#nav_content {
background-color:gray;
width:12.5%;
height:86%;
position:fixed;
top:14%;
z-index:-1;
}
#nav_side_container {
background-color:black;
width:60%;
height:93%;
position:relative;
top:3.5%;
left:18.75%;
}
#nav_side {
background-color:red;
width:75%;
height:93%;
position:relative;
top:3.5%;
left:12.75%;
}
#nav_side table {
width:100%;
height:100%;
font-family:'Playball';
font-size:1.25em;
font-weight:bold;
text-align:center;
}
#nav_side table td {
width:100%;
height:33.33%;
border-top:0.1em solid black;
}
/*News*/
#news_content {
background-color:red;
width:87.5%;
height:86%;
position:relative;
top:14%;
left:12.5%;
z-index:-2;
}
/*
#news {
background-color:black;
width:10em;
height:10em;
position:relative;
left:10em;
}
#news_main {
background-color:blue;
width:10em;
height:10em;
position:relative;
}
#news_side {
background-color:green;
width:10em;
height:10em;
position:relative;
}
/*Articles*/
#articles_content {
background-color:blue;
width:87.5%;
height:86%;
position:relative;
left:12.5%;
z-index:-2;
}
/*Future Plans*/
#future_content {
background-color:green;
width:87.5%;
height:86%;
position:relative;
left:12.5%;
z-index:-2;
}
<div id="page">
<div id="nav_main">
</div>
<div id="nav_content">
<div id="nav_side_container">
<div id="nav_side">
<table>
<tr>
<td>News</td>
</tr>
<tr>
<td>Articles</td>
</tr>
<tr>
<td>Future<br>Plans</td>
</tr>
</table>
</div>
</div>
</div>
<div id="news_content">
<div id="news">
</div>
<div id="news_main">
</div>
<div id="news_side">
</div>
</div>
<div id="articles_content">
</div>
<div id="future_content">
</div>
</div>
..
-No idea what the problem is to be truthfully... It could be my knowledge on how relative and absolute positioning is wrong or my code being complete haywire.
It's because your #page id doesn't have a height on it. If you give it height: 100%;, that should do it.
I want to make a box(in a form of div) that could arrange and move around objects in.
But, when I try to make objects to alight to left they pop out of it.
How can I fix this issue?
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100px;
overflow: hidden;
clear:both;
}
Try this(replace your class)
Edited found the answer:
just add position:relative;
to #slide in css file
HTMl
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slide">
<div id="right">
</div>
<div id="left">
</div>
</div>
</body>
Css
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100;
}
#right
{
top:40%;
height:20px;
width:20px;
background:black;
right:0;
position:absolute;
}
#left
{
top:40%;
height:20px;
width:20px;
background:black;
left:0;
position:absolute;
}
HTML
<!--Head-->
<div class="header_image">
<!-- <div class="leftImage"> -->
<img class="center_image" src="Final_Logo.png"/>
<!-- </div> -->
<!-- <div class="rightText"> --> <!-- I have commented these div so as to see if by chance they work in one div but i Both case problem is occurring.-->
<p>text<br>Contact Us</p>
<!-- </div> -->
</div>
<!--Navigation Bar-->
<div class="header" id="change">
<ul>
<li>Home</li>
<li>How It Works</li>
<li>Experts</li>
<li>Ask</li>
<li>Blog</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
CSS Code
body
{
background-image:url("LivingRoom.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
width:100%;
}
.header
{
display:inline-block;
background-color:#000000;
width:100%;
height:6%;
position:fixed;
top:0;
left:0;
z-index:99;
margin:4% auto;
text-align:center;
white-space:nowrap;
}
#change.header2 /*this css is used for scrolling purpose. Its code is in javascript*/
{
display:inline-block;
background-color:#000000;
width:100%;
height:6%;
position:fixed;
top:0;
left:0;
z-index:99;
margin:0 auto;
text-align:center;
white-space:nowrap;
}
ul
{
list-style:none;
display:inline-block;
width:100%;
margin:0 auto;
white-space:nowrap;
}
li
{
padding-top:.5%;
display:inline-block;
text-align:center;
white-space:nowrap;/*When I add width then when browser is resized text in menu overlaps*/
}
a:link, a:visited
{
display:inline-block;
width:150px;
text-align:center;
padding-left:1.5%;
padding-right:1.5%;
text-decoration:none;
color:white;
font-size:150%;
margin:0 auto;
}
a:hover,a:active
{
background-color:white;
color:black;
}
.header_image/*This is the header above menu when browser is resized the menu scrolls to the top of header*/
{
float:left;
top:0;
left:0;
right:0;
background-color:white;
height:8.5%;
width:100%;
}
When I resize the browser windows the navigation bar moves upwards overlapping with the logo and other information in the header.Also I am facing one problem that when I resize the browser the text gets overlapped with one another if I add width to <li> tag. How to avoid overlapping by using width? Please suggest.
My code is viewable at http://jsfiddle.net/ATbA5/2/ code will also be at the end of this post
I am trying to make content-wrapper 100% height however for it to be centered. I have looked at other theards on stackoverflow and Can't find a solution. Also A fixed footer at the end of the page not the bottom of the broswer window
HTML
<head>
<link rel="stylesheet" type="text/css" href="primary-resources/css/main-styles.css"/>
</head>
<body>
<div class="content-wrapper">
<!-- Header -->
<div class="header">
<div class="threetwentyleft">
<img src="primary-resources/imgs/header-logo.png" />
</div>
<div class="sixfortyright">
<div class="gameAdBanner">
<img src="game-resources/gameone/imgs/banner.png"/>
</div>
</div>
</div>
<!-- Content -->
<div class="gameLeft"></div>
<div class="gameRight"></div>
</div>
</body>
</html>
CSS
body ,html {
background-color:#000000;
height:100%;
top:0px;
bottom:0px;
clear:both;
padding:0px;
margin:0px;
}
.content-wrapper {
margin:auto;
background-color:#ffffff;
width:960px;
padding:0px;
bottom:0;px;
top:0px;
margin:auto;
box-sizing:border-box;
height:100%;
box-sizing:border-box;
clear:both;
box-sizing:border-box;
}
.header {
width:100%;
}
.threetwentyleft {
width:320px;
float:left;
padding:2px;
}
.threetwentyleft img{
width:320px;
padding:2px;
border:0px;
}
.sixfortyright {
width:630px;
float:right;
height:130px;
}
.gameAdBanner {
width:610px;
margin-top:2px;
margin-left:auto;
margin-right:auto;
}
.center {
margin-left:auto;
margin-right:auto;
}
.gameLeft {
width:700px;
padding:5px;
float:left;
}
.gameRight {
width:260px;
background-color:#CCC;
float:right;
padding:5px;
height:100%;
margin-right:3px;
}
.footer {
width:960px;
background-color:#FC6;
bottom:0px;
height:25px;
position:absolute;
}
Sounds like you want normal html behaviour, no need for any css, just add a div, or any block element after the content.
I have created the following demo:
http://thedrivepartnership.com/overflow.html
The scrolls expand fine in FireFox / Chrome but in IE it just does seem to want to work.
Does anyone come across the problem before.
css
body {padding:0px; margin:0px;}
.wrapper {
position:absolute;
top:0px;
bottom:0px;
width:100%;
height:100%;
background:red;
}
.block1 {
position:absolute;
top:0px;
right:0px;
width:70%;
height:50%;
background:green;
}
.block2 {
position:absolute;
bottom:0px;
right:0px;
width:70%;
height:50%;
background:blue;
}
.heading {width:100%; height:50px; background:black;}
.scroll {
overflow-y:scroll;
overflow-x:hidden;
width:100%;
position:absolute;
float:left;
top:50px;
bottom:0px;
zoom:1
}
html
<div class="wrapper">
<div class="block1">
<div class="heading"></div>
<div class="scroll">
<!--content here -->
</div>
</div>
<div class="block2">
<div class="heading"></div>
<div class="scroll">
<!--content here -->
</div>
</div>
</div>
Your design works fine in IE, you just need to declare a DOCTYPE in the first line of your document first.
<!DOCTYPE html>