On the header, I need to have
the logo be located the left side of the banner (without space)
Both banner and logo be always in the middle of the page (regardless of screen size)
Also have four images that should always be on the top right side of
the window (regardless of screen size)
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5;
}
#logo{
float:right;
}
#media screen and (min-width: 480px) {
#logo{
float:left;
}
}
#media screen and (min-width: 768px) {
#logo{
float:left;
}
}
.searchinput{
height: 40px;
border:#000 1px solid;
box-shadow: none;
margin-bottom:10px;
}
.btn-search{
background: #777;
width:95%;
height: 40px;
border: 1px solid #777;
border-radius: 4px;
padding:8px 50px;
display: inline-block;
text-align: center;
color: #fff;
font-weight: 100;
letter-spacing: 0.05em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn-search:hover{
color: #fff;
text-decoration: none;
border-color: #3c3c3c;
background: #3c3c3c;
box-shadow: none;
}
.btn-search:a{
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
Update
So far, I could put the images on the top right of the window.
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-10">
<div id="images" style="float:right; position: absolute;
right: 0;
top: 5px;
z-index: 9999;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
you misplaced one div
you no wrong in one div that you forgot to put it try to check in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5;
}
#logo{
float:right;
}
#media screen and (min-width: 480px) {
#logo{
float:left;
}
}
#media screen and (min-width: 768px) {
#logo{
float:left;
}
}
.searchinput{
height: 40px;
border:#000 1px solid;
box-shadow: none;
margin-bottom:10px;
}
.btn-search{
background: #777;
width:95%;
height: 40px;
border: 1px solid #777;
border-radius: 4px;
padding:8px 50px;
display: inline-block;
text-align: center;
color: #fff;
font-weight: 100;
letter-spacing: 0.05em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn-search:hover{
color: #fff;
text-decoration: none;
border-color: #3c3c3c;
background: #3c3c3c;
box-shadow: none;
}
.btn-search:a{
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="background-color:orange;">
<div class="col-md-9">
<div id="banner" style="margin-left: 49%;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC">
</div>
</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
</body>
</html>
I updated your fiddle to your needs. if you do it like this you don't even need a media query!
Please pay attention to the new added class google for the google image and the removed width property
http://jsfiddle.net/b9tbxtLb/16/
#logo{
display: inline-block;
}
.google {
display: inline-block;
}
#banner {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
display: inline-block;
text-align: center;
width: 100%;
}
#images img{
display: inline-block;
text-align: right;
}
#media screen and (min-width: 480px) {}
although i think you would be able to solve it on your own, with so many approaches provided ;)
how about centering inline-block?
#banner-container {
text-align: center;
}
#banner {
display: inline-block;
white-space: nowrap;
}
Just remove all the css which is not required and use only below snippets,
refer to the link below Here.
#image {
float: right;
position: absolute;
right: 0;
top: 5px;
max-width: 20%;
}
#logo {
margin-left: 10%;
float: left !important;
max-width :60%
}
and it will solve your issue if you remove the unwanted divs in the HTML part
Related
At #media only screen and (max-width: 991px) the content gets aligned centered. The eye icon which is positioned absolute gets way off. On large devices it is ok but col-sm-12 and below its position has problem.
The reason why i positioned it absolute is that i want the icon to not move. In the original code there is a functionality to hide and show password and the icon moved based on the length of the text.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
/* top: 78px; */
left: 300px;
}
.card-plans {
border-radius: 10px;
}
#media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
left: 600px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars">****************************</span>
<i class="x fa fa-eye" aria-hidden="true"></i>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
When position absolute, make sure you have a good relative.
I placed your eye in the password xxxx field. And made that relative.
No media query is needed then.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.relative {
position: relative
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
right: -25px;
}
.card-plans {
border-radius: 10px;
}
#media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
right: -25px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars relative">****************************<i class="x fa fa-eye" aria-hidden="true"></i></span>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
I have a couple of issues with this code:
1. The fourth div is being seemingly squished. Its height is smaller than the other divs.
2. The height of the container div doesn't change to 50%. I used wv, but I'm not sure why % doesn't work.
https://codepen.io/anon/pen/drERNr
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
Your fourth element is being squashed because you float the first three elements to the left, but don't 'reset' the float. This can be achieved with a clearfix:
#box4:before {
content: "";
display: table;
clear: both;
}
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4:before {
content: "";
display: table;
clear: both;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
As for why you can't use % on the .container, it's because percentage-based units inherit their value from the immediate parent (and chain upwards), yet <body> has no fixed height defined. You need a calculated height on the parent in order for the child to be able to calculate its own height as a percentage.
If I run the code without bootstraps container and rows etc.. it does work.
But if i run the code like this snippet inside container etc. the ahref's are not working!
Unless i remove the z-index, but i want the menu to look like it is now.
This have been bugging me for a couple of hours now, and i need someone with a different way of "look" at this problem.
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
z-index: -1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
<div id="somename">
somelink
somelink
</div>
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Your id somenname is inside of your outer id topHeader.
You simply need to use z-index on 2 separate div in your case
Separate topheader and somename
Now overlap topheader on somename by following code:
#topheader{
z-index:2;
position:relative;
}
#somename{
z-index:1;
}
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
margin: -10px 5px 0px 5px;
z-index: 1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
z-index: 2;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
</div>
<div id="somename">
somelink
somelink
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
I have created a news web site like http://www.bbc.com/persian .
There is a problem in top header.
I want to put all the elements in a line, But they are placed under Link
<a> text-decoration not work.
How to resolve it?
**
Friends . Please give rather than negative score, call me to question
**
body {
float: right;
direction: rtl;
margin: 0;
padding: 0;
}
.iri-Header {
width: 1349px;
height: 40.5px;
background-color: red;
}
a {
text-decoration: none;
}
.iri-Header-container {
width: 1008px;
height: 40.5px;
padding: 0 16px;
margin: 0 auto;
background-color: blue;
position: relative;
vertical-align: baseline;
}
.logo {
width: 92px;
height: 39.5px;
background-color: yellow;
padding-left: 8px;
}
.logo img {
padding-top: 7px;
}
.iri-login {
width: 167.05px;
height: 39.5px;
background-color: violet;
float: right;
border-right-style: solid;
border-color: #000000;
border-right-width: 1px;
border-bottom-color: #1083b5;
cursor: pointer;
}
.iri-login:hover {
border-bottom-style: solid;
border-color: #000000;
}
.statusbar {
background-color: red;
margin-left: 40px;
margin-top: 10px;
margin-right: 10px;
font-family: 'Iranian Sans';
}
.statusbar a span {
text-decoration: none;
}
.icon-login img {
width: 30px;
height: 30px;
float: left;
margin-top: -24px;
margin-left: 2px;
}
.nav-link {
width: 505.5px;
height: 39.5px;
background-color: aqua;
border-right:1px solid black;
}
.nav-search {
width: 208px;
height: 38.5px;
background-color: red;
font-family: 'Iranian Sans';
border-right:1px solid black;
}
.search-form {
background-color: black;
width: 208px;
height: 38.5px;
}
.row {
padding-top: 2px;
}
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Site IR</title>
<link href="StyleSheet/StyleSheet.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="iri-Header">
<div class="iri-Header-container">
<div class="logo">
<a href="#">
<img src="img/Logo.png" />
</a>
</div>
<div class="iri-login">
<div class="statusbar">
<span id="login-txt">Login</span>
</div>
<div class="icon-login">
<img src="img/pic1.png" />
</div>
</div>
<div class="nav-link">
</div>
<div class="nav-search">
<div class="row">
<!-- /.col-lg-6 -->
<div class="col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="جستجو کن . . .">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search
"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Try border:0; in the linked element
body {
float: right;
direction: rtl;
margin: 0;
padding: 0;
}
.iri-Header {
width: 1349px;
height: 40.5px;
background-color: red;
}
a {
text-decoration: none;
}
.iri-Header-container {
width: 1008px;
height: 40.5px;
padding: 0 16px;
margin: 0 auto;
background-color: blue;
position: relative;
vertical-align: baseline;
}
.logo {
width: 92px;
height: 39.5px;
background-color: yellow;
padding-left: 8px;
}
.logo img {
padding-top: 7px;
}
.iri-login {
width: 167.05px;
height: 39.5px;
background-color: violet;
float: right;
border-right-style: solid;
border-color: #000000;
border-right-width: 1px;
border-bottom-color: #1083b5;
cursor: pointer;
}
.iri-login:hover {
border-bottom-style: solid;
border-color: #000000;
}
.statusbar {
background-color: red;
margin-left: 40px;
margin-top: 10px;
margin-right: 10px;
font-family: 'Iranian Sans';
}
.statusbar a span {
text-decoration: none;
}
.icon-login img {
width: 30px;
height: 30px;
float: left;
margin-top: -24px;
margin-left: 2px;
}
.nav-link {
width: 505.5px;
height: 39.5px;
background-color: aqua;
border-right:1px solid black;
}
.nav-search {
width: 208px;
height: 38.5px;
background-color: red;
font-family: 'Iranian Sans';
border-right:1px solid black;
}
.search-form {
background-color: black;
width: 208px;
height: 38.5px;
}
.row {
padding-top: 2px;
}
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Site IR</title>
<link href="StyleSheet/StyleSheet.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="iri-Header">
<div class="iri-Header-container">
<div class="logo">
<a href="#">
<img src="img/Logo.png" />
</a>
</div>
<div class="iri-login">
<div class="statusbar">
<span id="login-txt">Login</span>
</div>
<div class="icon-login">
<img src="img/pic1.png" />
</div>
</div>
<div class="nav-link">
</div>
<div class="nav-search">
<div class="row">
<!-- /.col-lg-6 -->
<div class="col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="جستجو کن . . .">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search
"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I have some problems with <div>s. The inner <div> (content div) won't push the outer <div> (wrap_content).
Let me post the code so that you have a chance to see what could be wrong.
style.css
* {
padding: 0px;
margin: 0px;
}
body {
background: #e2e2e2;
color: #f2f2f2;
font-family: Arial;
}
#wrap_design {
width: 1139px;
}
#wrap_content {
float: right;
max-width: 963px;
height: 100%;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
}
#header {
height: 236px;
width: 963px;
background-color: #2d2828;
}
#headerimg{
z-index: 1;
margin-left: -26px;
}
#loggedin_box {
min-height: 230px;
width: 160px;
background: #2d2828;
float: left;
margin-top: 236px;
position: static;
padding-bottom: 5px;
}
#loggedin_box_green {
height: 30px:
width: 150px;
background: #73aa09;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
letter-spacing: 2px;
}
#loggedin_box ul {
border: none;
}
#loggedin_box ul li {
list-style: none;
text-align: left;
}
#loggedin_box ul li a {
font-family: Arial;
font-size: 14px;
color: #b1b2b2;
text-decoration: none;
padding-left: 5px;
}
#menu_container {
margin: 0px 0px 0px 0px;
background: #2d2828;
font-family: Arial;
width: 100%;
margin: 0px auto;
height: 65px;
}
#content {
color: black;
vertical-align: top;
height: 100%;
margin-bottom: 10px;
clear: both;
}
#content-sidebar {
border-left: 2px solid #2d2828;
float: right;
width: 285px;
max-width: 285px;
height: 100%;
}
index.php
<html>
<head>
<link rel="shortcut icon" href="images/nfgico.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/style/style.css" type="text/css" />
</head>
<body>
<CENTER>
<div id="wrap_design">
<div id="loggedin_box">
<?php
if($_SESSION['username'] == "") {
?>
<div id="loggedin_box_green">Log ind</div>
<div style="text-align: left; padding-left: 10px;">
<form action="login_check.php" method="post">
<input type="text" value="Brugernavn" name="username" style="width: 140px;" onclick="this.value=''"><br /><br />
<input type="password" value="password" name="password" style="width: 140px;" onclick="this.value=''"><br /><br />
<font style="font-family: Arial; font-size: 12px;">Husk mig:</font><input style="margin-left:15px;" type="checkbox" name="rememberme" class="checkbox" value="1" /><br /><br />
<input type="submit" value="Log ind"><br /><br />
</form>
<ul>
<li>Glemt kodeord</li>
<li>Opret bruger</li>
</ul>
</div>
<?php
} else {
?>
<div id="loggedin_box_green">Network</div>
<ul>
<li>Wall</li>
<li>Profil</li>
<li>Chat</li>
<li>Achievements</li>
<li>Clanside</li>
<li>Søg modstander</li>
<li>Søg spil</li>
<li>Log ud</li>
</ul>
<?php
}
?>
</div>
<div id="wrap_content"> <!-- This is the one that needs to be pushed -->
<div id="header">
<img src="/images/banner.png" id="headerimg">
</div>
<div id="menu_container">
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><span>Forside</span></li>
<li><span>Nyheder</span>
<ul>
<li>Seneste</li>
<li>lol</li>
<li>loool</li>
<li>loool</li>
</ul>
</li>
<li><span>Artikler</span></li>
<li><span>Spil</span></li>
<li><span>Turneringer</span></li>
<li><span>Clan</span></li>
<li><span>Streams</span></li>
<li><span>Webshop</span></li>
</ul>
</div>
</div>
<!-- Content/brødtekst -->
<div id="content">
CONTENT GOES HERE THIS IS WHAT NEED TO PUSH
</div>
</div>
</CENTER>
</body>
</html>
There is some part of the code from index.php that I didn't post because I hope you don't need it :)
I really hope someone can help me!
ps. I have done some research on the internet, and learned that I should use clear: both; but I really can't get it to work.
Remove the height: 100% from your #wrap_content style (it's causing problems), and then to ensure it wraps around any float elements, add width and overflow as folows:
#wrap_content {
float: right;
max-width: 963px;
border-right: 8px solid #2d2828;
border-left: 8px solid #2d2828;
border-bottom: 8px solid #2d2828;
padding-bottom: 10px;
width: auto; /* Must use this for overflow to do what you want */
overflow: hidden; /* This, plus width, causes box to stretch around floated elements inside of it */
}
Just as a little note, there's a fair amount of unnecessary css going on in there. I'd encourage you to go through it carefully and modify/remove it. You could do what you are after with half of the amount of css.
REMOVE all of the "height:100%;" everywhere - if does not do what you think it does.
I would suggest removing your CENTER and making your #wrap_design be like this:
#wrap_design
{
margin: 0 auto;
width: 1139px;
}
This will center your wrapper - I'd strongly advise against CENTER. If you want to change the margin top of this wrapper (ie 20px from top and bottom) do this margin: 20px auto;.
You don't need to use clear: both; necessarily. In a wrapper of a float (or multiple floats) you can just put overflow: hidden (same effect) and no additional markup is needed:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
overflow: hidden;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
</div>
If you didn't have the "overflow: hidden" in this example you wouldn't see the "#CCC" background color in the .container.
This is the same as doing clear way (but again above is better because less markup):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
width: 400px;
}
.left
{
float: left;
}
.right
{
float: right;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
Clear method is good in a case like this (when you want a child "outside of the parent"):
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
}
.clear
{
clear: both;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="clear"></div>
</div>
But again, I wouldn't recommend that markup, if your design could be different you can use clear like this too:
<style type="text/css">
.container
{
background: #CCC;
border: 1px solid #ddd;
margin: 50px auto;
width: 400px;
}
.left
{
float: left;
width: 200px;
}
.right
{
background-color: #333;
color: #FFF;
float: right;
margin: -10px -40px 0 0;
width: 240px;
}
.full
{
background: #f5f5f5;
clear: both;
margin: 20px auto;
text-align: center;
width: 90%;
}
</style>
<div class="container">
<div class="left">
this will float left
</div>
<div class="right">
this will float left
</div>
<div class="full">
this is full sized
</div>
</div>
If you follow these example, you should solve your problem :)