*{
margin:0;
padding:0;
}
html, body{
box-sizing:border-box;
height: 100vh;
}
body{
color:white;
height: 100%;
min-width: 100%;
background: url("images/friends.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.container{
height: 100%;
width: 100%;
}
.container2{
width:80%;
margin:auto;
text-align:center;
}
header{
padding:1em;
margin: 0;
}
/*navigation styling*/
#navbar{
display: flex;
justify-content: space-between;
}
#navbar ul{
display:flex;
align-items:center;
list-style:none;
}
#navbar ul li a{
text-decoration:none;
padding:.75rem;
}
header nav li a:hover{
color:red;
transition:.75s;
}
/*login modal styling*/
#login-modal{
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.5);
position: absolute;
top:0;
left:0;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
display: none;
}
#login-content{
height:80%;
width:25%;
position:relative;
background-color:red;
border-radius:2%;
display:flex;
flex-direction: column;
justify-content:center;
text-align:center;
}
.close{
position:absolute;
top:0;
right:5%;
cursor:pointer;
font-size: 30px;
}
.login-input{
display:block;
margin: 0 auto 1.5rem auto;
padding:.5rem;
border: 2px solid black;
border-radius:24px;
}
#login-logo{
height:6rem;
width:6rem;
margin-bottom: 2rem;;
}
.agreement{
margin:1.5rem 1rem;
}
/*remove border on inputs, etc.*/
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
.button{
width: 6rem;
height: 2.5rem;
color: red;
background-color:white;
border-radius:24px;
border:none;
cursor:pointer;
}
.button:hover{
color:white;
background-color: #861111;
transition:.75s;
}
a{
color:white;
}
/*main description of site for homepage*/
.maindescription{
margin:2rem;
}
.description-header{
font-size:4rem;
margin-bottom:.5rem;
}
.description{
margin-bottom: .75rem;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="apple-touch-icon" sizes="180x180"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="32x32"
href="images\free_horizontal_on_white_by_logaster.jpg">
<link rel="icon" type="image/jpg" sizes="16x16"
href="images\free_horizontal_on_white_by_logaster.jpg">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="resolve.css">
<title>Resolve - Real Women, Real Feedback</title>
</head>
<body>
<header>
<div class="container">
<nav id="navbar">
<div id="branding">
<a href="indexresolve.html"><img src="images/lasttry.png"
alt="resolvelogo"></a>
</div>
<ul>
<li><a href="indexresolve.html"Home></a></li>
<li><a class="current" href="howitworks.html">How It
Works</a></li>
<li>Contact</li>
<li>FAQ</li>
<li><button id="login" class="button">Log In</button>
</li>
</ul>
</nav>
<!-- Login Modal -->
<div id="login-modal">
<div id="login-content">
<span class="close">×</span>
<div>
<img id="login-logo"
src="images\free_horizontal_on_white_by_logaster.jpg">
</div>
<form>
<input class ="login-input" type="text"
placeholder="username" >
<input class ="login-input" type="password"
placeholder="password">
<button class="button" id="modalbutton">Log
In</button>
</form>
<p class="agreement">By clicking log in, you agree
to our Terms, <a href="privacy.html">Privacy
Policy</a>, and
our Cookie Policy.</p>
<P><a href="forgotpasswords">Forgot Username or
Password?</a></P>
</div>
</div>
<!--End Login Modal-->
</nav>
</header>
<section>
<!--Guys-->
<div class="container2">
<div class="maindescription">
<h1 class="description-header">Guys</h1>
<h2 class="description">Resolve is the new way to improve
your dating life. Get real women's unbiased feedback on your
dating profiles, the way you dress, your body language,
conversational skills, and more. Real, actionable advice on how to become a
man
that women will desire.</h2>
<button class="button">Get Started</button>
</div>
<!--Ladies-->
<div class="maindescription">
<h1 class="description-header">Ladies</h1>
<h2 class="description">dhkjfdah jdhfakjh jhafdkjh kjhfdalkjf lkjafhd
fhkahuf kjeuud eeuiw udhakje huidhf aufhlahfa fuashfeudhfyus fuaifhdsh
khadf alufhaliufhalifhaf sf! </h2>
<button class="button">Get Started</button>
</div>
</div>
</section>
<script src="resolve.js"></script>
</body>
</html>
I want my background image to cover 100% of the browser window, I do not care if it is cropped. Right now at a certain size, it cuts off at the bottom. I tried putting the background image in the HTML selector in CSS instead of the body selector but that did not work. Overflow: hidden worked but it cut off the content as well.
Here is my jsfiddle :https://jsfiddle.net/benmikola66/vu6btxpw/3/
You could change body to:
body {
color:white;
height: 100%;
min-width: 100%;
background: url("https://i.postimg.cc/5tJtgDD1/friends.jpg") no-repeat center center fixed;
background-size: cover;
}
Here is the fiddle
Related
ive been following this guys tutorial, ive timestamped it- and he has a text block that floats to the side.
image, which is a div on its own keeps going in the middle when i make one float left and the other float right and i don't know why.
enter image description here
*also if i put the image floated next to a textbox, how would i make sure they're the same height?
body {
background-color: aquamarine;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.navbar {
list-style: none;
color: red;
}
.container {
width: 60%;
margin: auto;
}
.box-1 {
margin-bottom: 1%;
padding: 1%;
background-color: darkgray;
color: white;
}
.box-2 {
float: left;
padding: 1%;
width: 30%;
color: black;
background: white;
border-style: none;
}
.sidebox {
float: right;
background-color: aliceblue;
width: 60%;
}
img {
float: none;
margin: 10%;
display: block;
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>help</title>
<link href="Untitled-1.css" rel="stylesheet" />
<meta charset="utf-8" />
<meta name="description" content="Web Development" />
<meta name="keywords" content="HTML and CSS" />
<meta name="author" content="grace" />
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Study</li>
<li>Animation</li>
</ul>
</nav>
</header>
<div class="container">
<div class="box-1">
<h1>Achievments</h1>
<p>Grace has completed these 4 achievements:</p>
<ol>
<li>Two decades of existing</li>
<li>3+ jobs</li>
<li>Graduated high school</li>
<li>Failed hopes and dreams</li>
</ol>
</div>
<div class="box-2">
<h1>Hobbies</h1>
<ul>
<li>Rollerskating</li>
<li>Crying</li>
<li>Buying many books</li>
<li>Reading some books</li>
<li>Drawing and ctrl z</li>
<li>Video Games</li>
</ul>
</div>
<div class="sidebox">
<p>Lorem ipsum ebfasuigfuie eufsiefh adfhuseifhuei efhnsihfeihf </p>
<p>fuck</p>
<p>off</p>
<p>image</p>
</div>
<div class="astro">
<img src="https://res.cloudinary.com/dvifiaohc/image/upload/v1651048486/fly_gpbrfe.png">
</div>
</div>
</body>
</html>
Your CSS for the image elements is all wrong if you're trying to float and snap to the rightmost part of the page.
img{
float:none;
margin:10%;
display:block;
width:300px;
}
Set the margin value to something closer to 0 and set float: right, like so
img{
float: right;
margin:5px;
display:block;
width:300px;
}
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I created my first email template (exercise). In the beginning I did it without tables, but later I converted it to tables. Now I have a mess; I'd like to center all text and the header, but I don't know how. I've used table-align but it did not work.
Code before (divs):
https://jsbin.com/pusokiyido/edit?html%2Coutput
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>emailer</title>
<meta name="description" content="Interaktywny poradnik szybkiego startu dla Brackets.">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html, body {
/*font-size: calc 8px + (16 -8) * ((100vw - 200px) / (1200 - 200))); */
color:white;
}
}
.emailer-background {
background:#eee;
}
.emial-container {
max-width: 700px;
background: #fff;
font-family: sans-serif;
text-align: center;
margin: 0 auto;
display:block;
overflow: hidden;
border-radius: 5px;
margin-bottom:30px;
}
.text{
font-size: 0,6em;
margin-left: 5px;
margin-right:5px;
padding-left:5px;
padding-right:5px;
padding-top:20px;
color:white !important;
}
.center{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.content {
background-image: url("img/bg.jpg");
background-color: #793985;
background-repeat: no-repeat;
background-size: cover;
}
.slogan h1 {
font-size: 3vw;
color:white;
padding-right:10px;
padding-left:10px;
letter-spacing:-0.6pt;
line-height:/*44pt*/ 2,7vw; }
.separator {
background-color: rgba(154, 207, 141, 0.1);
background: rgba(154, 207, 141, 0.1);
}
/*.separator h1, h2, h3 {
color:white !important; */
}
.separator h2 {
font-size:1,5vw;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
img {
max-width:100%;
}
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
align-items: center;
justify-content: space-around;
padding-top:10px;
}
.qr, .logo {
padding-right:10px;
padding left:10px;
min-width:45px;
}
.logo {
max-width:80px;
min-width:45px;
}
.link {
letter-spacing:10pt;
font-size:16px !important;
padding-top:15px;
padding-bottom:15px;
}
.koperta li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="emailer-background">
<div class="emial-container">
<div class="content">
<div class="separator">
<img src="img/heder.jpg" alt="header image">
<div class="text"><b>usługi fotograficzne</b>: wywoływanie fotografii z każdego typu nośnika i klisz, renowacja,
retusz zdjęć, fotografia okolicznosciowa, sesje fotograficzne studyjne i plenerowe, fotografia
reklamowa i katalogowa, akcesoria foto, <br>ramki, albumy, kubki, koszulki, poduszki z Twoim projektem</p>
<p><b>usługi poligraficzne:</b> ksero, bindowanie, drukowanie, skanowanie. </div>
</div><!--separator end-->
<div class="slogan">
<h1>Zamrażanie chwil
<br>i malowanie światłem <br>
to sztuka ! </h1>
</div>
<div class="slogan2">
<div class="separator">
<h2>Chcesz zobaczyć jak to działa?<br>
Przyjdź, przyjmiemy Cię z radością ! </h2>
</div>
</div><!--slogan 2 end-->
<div class="flexcontainer">
<div class="qr">
<img src="img/qr.svg">
</div>
<div class="logo">
<img src="img/logo.svg">
</div>
<div class="qr">
</div>
<div>
<ul class="fa-ul">
<li class="koperta"> Email: <br>zorza.studio#gmail.com</li>
<li>Tel. <b>697 625 645</b></li>
</ul>
</div>
</div><!--- felx end-->
<div class="separator">
<h2 class="link">facebook.com/zorza.studio</h2>
</div>
</div><!--content end-->
</div><!--container end-->
</div><!--background end-->
</html>
After (tables)
https://jsbin.com/muzokadutu/edit?html,output
text-align:left/rignt/center !important ;
try this.
Remove text-align: center; in .emial-container.
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.
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.