I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
Related
The background image I have in a div on my website shows up in the inspect element and the background image is correctly pathed in css but it is covered up by something in my code ,and I can't seem to find it.If anyone can look at my code and see what the problem is,it would be greatly appreciated.
* {
margin:0;
padding:0;
box-sizing: border-box;
list-style-type:none;
text-decoration: none;
}
body,html {
width:100%;
height:100%;
}
body {
text-decoration:none;
margin:0;
padding:0;
background-color:#000;
}
.wallpaper {
background-image: url('/../images/wallpaper.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-position:center top;
width:100%;
height:100vh;
}
.nav {
position:absolute;
top:10px;
width:100%;
height:50px;
overflow:hidden;
z-index:1;
}
.nav ul {
text-align:center;
float:right;
display:block;
margin:0 auto;
margin-right:50px;
}
.nav ul li {
float:left;
cursor:pointer;
}
.nav ul li a {
color:#fff;
font-size:16px;
line-height: 50px;
padding:0 10px 7px 10px;
font-family: "Playfair Display";
text-transform: uppercase;
}
.nav ul li a:hover {
border-bottom:2px solid #fff;
}
<body>
<div class="wallpaper">
<p>Hello</p>
</div>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</body>
Would this work for you?
Change HTML:
<body>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="wallpaper">
<p>Hello</p>
</div>
</body>
Change CSS:
.wallpaper {
background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg');
background-repeat:no-repeat;
background-size:100% auto;
width:100%;
height:100vh;
}
https://jsfiddle.net/PRW69/r258vvvm/
There is nothing wrong with your code. You need to double-check the path - that's where the issue is. If you share your folder structure, maybe we could help point out the error.
The following is my code. My questions are below that:
<html>
<head>
<title>My BBC News Reader</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
#signindiv {
font-weight:bold;
font-size:0.9em;
padding: 6px 80px 12px 20px;
float:left;
border-right:1px solid #990000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
padding:0;
margin:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9em;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
padding:5px 0 0 10px;
float:left;
}
#searchdiv input {
height:25px;
border:none;
padding-left:10px;
background-image:url("images/glass.png");
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
<p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
</div>
</body>
</html>
Just to show, I uploaded the code here - http://www.mazdoor.net/bbcnews.html . I will remove once I fix the issue.
1. The vertical border lines are sticking out. I can't figure out what the issue is.
2. The Sign in logo and text are not aligning with the BBC logo.
Kindly help me. I just started HTML and CSS 4 days ago.
Thank you
remove
#topmenudiv li{
height: 100%; <!--- remove
}
#signindiv p{
margin:0; <!--- remove default margin given by browser
}
This is because the padding is set on the list items.
Try this:
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 0px 20px;
float: left;
line-height: 35px;
}
This will remove the height on the padding and set the vertical height of the text with line-height.
this is the correct code
<html>
<head>
<title>My BBC News Reader</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width:100%;
height:auto;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:15px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
min-height: 53px;
}
#signindiv {
font-weight:bold;
font-size:0.9em;
padding: 6px 80px 12px 20px;
float:left;
border-right:1px solid #990000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
padding:0;
margin:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9em;
border-right:1px solid #990000;
/*height:100%;*/
padding:26px 20px;
float:left;
}
#searchdiv {
padding:5px 0 0 10px;
float:left;
}
#searchdiv input {
height:25px;
border:none;
padding-left:10px;
background-image:url("images/glass.png");
background-repeat:no-repeat;
background-position:right center;
}
.clear{float:none !important;clear:both;}
ul li:last-of-type{padding:0px !important;border:none;height:0px !important;}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
<p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
<li class='clear'></li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
in here all the things what have i done is hard to explain i explained it briefly.study the code...and try to understand
1.<li class='clear'></li> add for clear floats in ul
<div class='clear'></div> add for clear floats fixedwidth div
change topbar div height to auto to get the topbar height according to its inside content.
#topmenudiv li padding changes padding: 26px 20px then its height will equal with signindiv height.
delete #topmenudiv li height then #topmenudiv li height will be height auto.( if #topmenudiv li{height:auto;} list items get full screen heigh)
2.
to align logos vertically simply add padding top value to logodiv.you have to use your eye sight to check whether is it align with signout logo or not.
Some of the links in my nav bar do not function. They seem to get covered up by an iframe element, and do not change color.
The iframe element is visibly below the nav bar, but I used .wrapper1 to reposition the iframe element. When I remove the iframe element, or remove the .wrapper1 object, the problem disappears (the links work).
insight?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper1 {position:fixed; left:50%; top:80px;}
iframe {
background: rgba(256,256,256,0);
position:relative;
top:60px;
left:-400px;
}
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
}
li {
background:none;
display:inline;
width:100%;
padding-left:40px;
color:#FFF;
font-size: 16pt;
font-family:'Rammetto One', cursive;
}
a {
text-decoration: none;
color:#FFF;
}
a:hover, a:active {
color:#333;
}
</style>
</head>
<body bgcolor="#000">
<div class="wrapper1">
<ul>
<li>Introduction</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
<div>
<div class="wrapper1">
<iframe name="content_frame" width="800" height="300"></iframe>
</div>
</body>
</html>
Preview (jsFiddle)
Add
z-index: 1;
to "ul" like so:
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
z-index: 1;
}
Link to Demo
My issue is that when I zoom in or out of the page (in all the browsers I tried), only some parts of it are displayed as zoomed (the contents that are in the divs, but not the divs themselves). I put the borders to show it easily.
When I searched for a solution, all of them mentioned that it is because of fixed width values by using pixels (px). So, I used % when putting values to width and height; but still, the issue remains...
Here are some screenshots to illustrate my problem:
When zoomed-in:
When zoomed-out:
Here is my code:
HTML:
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="title_bar">
some txt here
<div id="title_img"></div>
<div id="title_txt"></div>
<div id="menu_navigation"></div>
</div>
<div id="title_bar_2">
some txt here
</div>
<div id="container_columns">
<div id="column_1">
<span id="column_1_content">some txt here</span>
</div>
<div id="column_2">
<span id="column_2_content">some txt here</span>
</div>
</div>
</body>
</html>
CSS:
html body
{
margin: 0;
width: 100%;
height: 100%;
background-color:#f2f2f2;
}
div#title_bar
{
height:4%;
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;
}
div#title_bar_2
{
text-align:center;
height:44%;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;
}
div#title_bar img
{
margin-top:1%;
float:left;
}
div#title_txt
{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;
}
div#menu_navigation
{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;
}
div#container_columns
{
margin:auto;
width:76.5%;
margin-top:2%;
height:27%;
border-style:solid;
border-color:blue;
}
div#column_1
{
height:100%;
width:49%;
float:left;
border-style:solid;
border-color:blue;
}
div#column_2
{
margin-left:1%;
width:48%;
float:left;
height:100%;
}
Hi This is happening because you are using the property height. try not to use it, if you want this property.
html body{
margin: 0;
width: 100%;
background-color:#f2f2f2;}
div#title_bar{
width:76%;
margin:auto;
margin-top:4%;
border-style:solid;
border-color:blue;}
div#title_bar_2{
text-align:center;
width:76%;
margin:auto;
margin-top:2%;
border-style:solid;
border-color:blue;}
div#title_bar img{
margin-top:1%;
float:left;}
div#title_txt{
float:left;
margin-left:2%;
margin-top:1.4%;
font-style: italic;
font-family:verdana;
font-size: 16px;}
div#menu_navigation{
float:left;
margin-left:35%;
margin-top:1.4%;
font-size:19px;}
div#container_columns{
margin:auto;
width:76.5%;
margin-top:2%;
border-style:solid;
border-color:blue;
display:block;}
div#column_1{
width:48%;
float:left;
border-style:solid;
border-color:blue;}
div#column_2{
margin-left:1%;
width:48%;
float:left;}
Im a self learner for web designing, so i might missed out some fundamentals coding.
So the problem is the content is overspilling the div from the right in one line.
The code as below
THE HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div id="bg">
<div id="mainwrapper">
<div id="header">
<div id="logo"></div>
</div>
<div id="contentwrapper">
<div id="leftwrapper">
<div id="contentspacing">
<div id="content">
<p>
asdfasdfasdfasdvvasdvasdvasdvfasdvsdasdas
dfasdfasdfasdvvasdvasdvasdvfasdvsdasdasdfasdfas
</p>
</div>
</div>
</div>
<div id="rightwrapper">
asdfasdf
</div>
</div>
</div>
</div>
</body>
</html>
THE CSS AS BELOW
/* ---------------------------------------------------------------*/
/* ---------------------> RESET <<<-------------------------*/
/* ---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
body {
font-family:Arial,sans-serif;
font-size:100%;
line-height:1.3em;
_font-size:16px;
color:#504e45;
background:#ebe9e1 url(pics/bg.jpg) top left repeat-x;
}
#bg {
float:left;
display:block;
height:600px;
width:100%;
background:url(pics/hotel-bg.jpg) top center no-repeat;
margin:0 0 0 0;
}
#mainwrapper {
float:left;
display:block;
width:1000px;
margin:0 auto;
}
#header {
float:left;
display:block;
}
#logo {
width:274px;
height:44px;
background:url(pics/logo.png) no-repeat;
margin:50 0 0 100;
}
p {
float:left;
display:inline-block;
line-height:1.7em;
margin:1em 0;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}
#contentwrapper {
float:left;
display:block;
width:1000px;
}
#leftwrapper {
float:left;
display:block;
width:593px;
}
#contentspacing {
float:left;
display:block;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
#content {
float:left;
display:block;
height:auto;
width:593px;
border:1px solid #bdc9f4;
background:url(pics/bg2.png) top left repeat-x;
margin:35 120;
}
#rightwrapper {
float:left;
display:block;
}
Add word-wrap: break-word; word-break: break-all; to #content
Demo here http://jsfiddle.net/ZK6yR/
This occurs when you are using rather long words. Try this:
word-wrap: no-break;