i keep getting unwanted top margin and cant remove it, i tried everything, this is affected one of my other projects as well, could find any solution. please help
heres 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>Joy The Designert</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin=0 marginheight=0>
<div id="Wrapper">
<div id="topBanner"><div class="container"><h2>top banner content</h2></div></div>
<div id="nav"><div class="container">Navigation Text<?include ("navigation.php");?></div></div>
<div id="featured"><div class="container"></div></div>
<div id="info"><div class="container">test</div></div>
<div id="support"><div class="container">test</div></div>
<div id="footer"><div class="container">testing footer<?include ("footer.php");?></div></div>
</div>
</body>
</html>
and heres my css content:
#charset "utf-8";
/* CSS Document */
html {
margin:!important 0px;
padding:0px;
}
body {
margin-top:!important 0px;
margin-left:0px;
margin-right:0px;
margin-botton:0px;
padding:0px;
border:none;
color: #292929;
font-family: Arial,Helvetica,sans-serif;
font-size: 81.25%;
}
#wrapper {
margin:0px;
Width:1000px;
height:auto;
}
.container {
width:900px;
margin:auto;
}
#topBanner{
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat-x;
height:44px;
width:100%;
}
#nav{
height:72px;
width:100%;
padding
color:#666666;
background-color: #F5F5F5;
border-bottom: 1px solid #FFFFFF;
box-shadow: 0 -5px 5px #5A595D;
color: #666666;
font-weight: bold;
height: 72px;
}
#featured {
min-height:420px;
width:100%;
background: url(none) no-repeat scroll center top #ECECEC;
border-bottom: 1px solid #FFFFFF;
}
#info{
background: url(images/gradient-bg.png);
background-repeat:repeat-x;
height: 256px;
width: 100%;
}
#support{
background-color: #F5F5F5;
border-top: 1px solid #FFFFFF;
box-shadow: 0 5px 5px #5A595D;
height:55px;
width:100%;
}
#footer{
width:100%;
height:150px;
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat;
}
#topBanner h2{
margin:0px;
}
This should solve it ;)
Related
I have a div that has a image that will stretch with the browser. I have a div that's a logo when the wrapper div(image) is shrunk the div should stay centered but its off to one side . I used left:42%; to center. It its fine when big just when u shrink it goes off to one side..
Do I have any other options besides left:42%;? margin: 0 auto; did not work...
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:42%;
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Use left: 50% with transform: translateX(-50%) to center an absolutely positioned element horizontally. Also remove the left margin so it's truly centered.
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Scenario
I've got the following code:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
What the code should do
Displaying a fixed header with the title "Material Design!" and an icon
What isn't working
Text and icon are not aligned
My question
How can I solve this problem?
As you can see if you add a yellow outline to the image, they are aligned. The bottom of the image sits on the same line as the text.
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
You can adjust that with vertical-align:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
img { outline: solid yellow 1px; vertical-align: top; }
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
… but ultimately you'll probably want to edit the image to adjust the amount of whitespace it has in it.
Try
.title img{
vertical-align: middle;
}
You just need to vertically align the icon:
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
.title img {
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><img src='http://stubborn.altervista.org/options.png'> Material design!</div>
</div>
</body>
</html>
you can use this code
html body{
font-family:Arial,Verdana,Geneva;
background-color:white;
}
.title{
background-color:red;
color:white;
position:fixed;
top:0;
left:0;
width:100%;
line-height:30px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 4px 4px 0px grey;
}
span{
background-image: url("http://stubborn.altervista.org/options.png");
background-repeat: no-repeat;
background-position: center left;
padding-left: 30px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title> Material design!</title>
</head>
<body>
<div class="container">
<div class="title"><span> Material design!</span></div>
</div>
</body>
</html>
or you can float left image an change padding left.
or you can vertical-align: middle for image
good luck
When I resize my page the items in my navigation bar overlap and get distorted. I want to either keep the layout how it is and stay still, or resize while keeping everything in order without overlapping. Part of this I know will include getting the search bar to resize as the screen size changes but I dont know how to do that. Please help! lol thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<style>
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders **/
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow-y:scroll;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
font-weight:bold;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#settings {
left:75%;
position:fixed;
width:40px;
height:40px;
color:red;
}
#home {
left:85%;
position:fixed;
width:40px;
height:40px;
color:blue;
}
#logo a {
background: url(logo.gif) no-repeat scroll 20px 9px;
color: #ffffff;
display: block;
height: 35px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
border-radius:15px;
float:right;
position:relative;
top:-33px;
left:-275px;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#news a { margin:30px; padding-left:25%; }
.nav { display:inline;}
.nav a { padding-left:20px; color:#BABABA; text-decoration:none; font-size:24px;}
.nav a:hover { color:#FFFFFF; }
</style>
</head>
<body>
<div id="head">
<div id="logo">
</div>
<div class="nav" id="news">News
</div>
<div class="nav" id="settings"><img src="redbox.gif" />
</div>
<div class="nav" id="home"><img src="bluebox.gif" />
</div>
<form>
<input class="searchbox" type="text"/>
</form>
</div>
</body>
</html>
I recommend putting all the contents that should not overlap together in a containing div then using min-height/min-width on that container to prevent the layout pieces (floats? fixed positions?) from sliding under or wrapping under one another.
I am trying to add an image together with some text and want both of them in the same background.
Meaning that I have a container where I put both the image and the text. And want to be able to steer the text however i want to. This might seem easy but I can not make it work, and would like to find out if anyone else knows how to get this job done.
Here comes the html and css i have put together, feel free to change it.
div.imagecaption{float: left;
width: 302px;
margin: 0 1em 1em 1em;
display: inline;
padding:
background: #036;
color: #fff;
}
div.imagecaption img{float: left;
margin-left: 1em;
border: 1px solid #fff;}
<div class="imagecaption">
<img src>
</div>
<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>
I also want the textual part to have a background-color of its own.
Now i have really tried making this work, and this is my latest attempt.
So, does anyone know what i am doing wrong?
Try this, Its a part of code which I use in my work
<!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" />
<style type="text/css">
.mybutton a
{
display:block;
line-height:60%;
text-decoration:none;
border:0px solid;
font:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:12px;
float:left;
background-color:#f5f5f5;
cursor:pointer;
color:#000;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
}
.mybutton a img
{
width:45px;
height:45px;
margin:5px 0px 5px 0 ;
padding:0px 15px 0px 15px;
border:none;
}
.mybutton a span
{
position:relative;
bottom:3px;
margin:5px 0px 0px 0px;
padding-left:10px;
}
.mybutton a.myimg{
color:#000;
}
.mybutton a.myimg:hover
{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.mybutton a.myimg:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
</style>
</head>
<body>
<div class="mybutton">
<a href="#" class="myimg">
<img src="card.jpg" alt="" align="top"/><br/>
<span style="padding-left:10px;" >My Button</span>
</a>
</div>
</body>
</html>
i don't know what you want exactly, try this :
<style>
div.imagecaption{
float: left;
width: 302px;
margin: 0 1em 1em 1em;
display:block;
padding:2px;
background: #036;
color: #fff;
}
div.imagecaption img{
float: left;
border: 1px solid #fff;
}
div.imagecaption p {
float: right;
margin-right: 8px;
width: 180px;
word-wrap: break-word;
}
</style>
<div class="imagecaption">
<img src="images/logo_ws2011.png">
<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>
</div>
I want to create a <div> which has a Label/Header displayed in Capitals letters. The <div> is 250px wide.
Inside the <div>, I will place another <div> which will contain controls. This inner <div> should be center aligned and the outer <div> should automatically increase its height to accommodate the controls height.
The outer <div> and inner <div> should have a border.
Is this possible with CSS?
im not sure what you are asking but maybe this will help?
<!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>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div#wrapper { display:block; width:250px; height:auto; margin:auto; padding:0; border:1px solid #F00; }
div#wrapper h1 { text-transform:uppercase; text-align:center; }
div#controls { display:block; width:100%; height:100px; margin:0; padding:0; border:1px solid #000; text-align:center; }
div#controls a { display:inline; margin:0 5px; line-height:100px; }
</style>
</head>
<body>
<div id="wrapper">
<h1>header</h1>
<div id="controls">
control
control
control
</div>
</div>
</body>
</html>
You mean like this?
<style type="text/css">
.panel { width: 250px; padding: 5px; border: 1px solid #666; }
.panel h1 { margin: 0 0 5px; padding: 0; text-transform: uppercase; }
.panel .content { padding: 5px; border: 1px solid #666; }
</style>
<div class="panel">
<h1>Title</h1>
<div class="content">
... controls ...
</div>
</div>