I need to delete space between the line and the picture. At screenshot it is seen that at the bottom of the line everything is ok, but on top, there is a space. It is set in .about_img:after (css file)
What have I done wrong?
Here's the code:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
h5.title {
margin-bottom: 10px;
font: 18px/18px Arial, sans-serif;
font-weight: bold;
color: #222222;
}
#about{
text-align: center;
}
.about-wrap{
margin-left: 16%;
margin-top: 70px;
}
.about_text{
width: 30%;
text-align: right;
}
.about_right{
text-align: left;
float: right;
}
.about_img{
width: 20%;
}
.about_img:after{
content: '';
display: block;
margin: 0 auto;
height: 94px;
width: 3px;
background: #f1f1f1;
}
.about_img img{
display: inline-block;
width: 170px;
height: 170px;
border: 7px solid #f1f1f1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.move_left_p{
margin-right: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PSD to HTML</title>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div id="wrapper">
<div id="about" name="about" class="box">
<div class="about-wrap">
<div class="about_item clearfix">
<div class="about_text left">
<h5 class="title"><span>July 2010</span> <br/>Our Humble Beginnings</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.
</p>
</div>
<div class="about_img left">
<img src="img/about_item1.png" alt=""/>
</div>
</div>
<div class="about_item clearfix move_left">
<div class="about_text right about_right move_left_p">
<h5 class="title"><span>January 2011</span><br/>
Facing Startup Battles</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.</p>
</div>
<div class="about_img right">
<img src="img/about_item2.png" alt=""/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
try the following:
.about_img:after{
margin: -5px auto 0 auto;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
h5.title {
margin-bottom: 10px;
font: 18px/18px Arial, sans-serif;
font-weight: bold;
color: #222222;
}
#about{
text-align: center;
}
.about-wrap{
margin-left: 16%;
margin-top: 70px;
}
.about_text{
width: 30%;
text-align: right;
}
.about_right{
text-align: left;
float: right;
}
.about_img{
width: 20%;
}
.about_img:after{
position: relative;
top:-1px;
right:-50px;
content: '';
display: block;
margin: 0 auto;
height: 94px;
width: 3px;
background:black;
}
.about_img img{
display: inline-block;
width: 170px;
height: 170px;
border: 7px solid #f1f1f1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.move_left_p{
margin-right: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<div id="about" name="about" class="box">
<div class="about-wrap">
<div class="about_item clearfix">
<div class="about_text left">
<h5 class="title"><span>July 2010</span> <br/>Our Humble Beginnings</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.
</p>
</div>
<div class="about_img left">
<img src="img/about_item1.png" alt=""/>
</div>
</div>
<div class="about_item clearfix move_left">
<div class="about_text right about_right move_left_p">
<h5 class="title"><span>January 2011</span><br/>
Facing Startup Battles</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.</p>
</div>
<div class="about_img right">
<img src="img/about_item2.png" alt=""/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.about_img:after{
position: relative;<!----------solution-------->
top:-1px;<!----------solution-------->
right:-50px;<!----------solution-------->
content: '';
display: block;
margin: 0 auto;
height: 94px;
width: 3px;
background:black;
}
Modify your code as above
This is caused by carriage returns or simply spaces in the code when formatting inline-block elements.
In order to fix this I would adjust .about_img img display property to block, and then set the side margins to auto like this:
.about_img img{
display: block;
width: 170px;
height: 170px;
border: 7px solid #f1f1f1;
border-radius: 50%;
margin-right: auto;
margin-left: auto;
}
Also you can try to remove white spaces between those elements or convert them to html comments (<!-- -->) if you need to keep the inline-block and the spaces.
Related
I have a little problem with my header i want this:
search bar to be flexible, and this means that if that orange buttons text becomes larger the search bar must resize so that buttonsdont go down who knows how to do it can you share your experience, and sorry form my English
HTML
<div class="navigation-holder">
<div id="top-navbar">
<div class="container">
<div class="col-lg-9 no-padding">
<input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам">
</div>
<div class="col-lg-3 no-padding">
<div class="top-navbar-links">
#if(Auth::check())
{{ Auth::user()->first_name }}
Выйти
#else
aefaefaefaefaefaefaefe
Зарегистрироваться
#endif
</div>
</div>
</div>
</div>
<nav id="navbar">
<div class="container">
<button class="navbar-toggle">
<span></span>
</button>
<ul class="navbar-nav">
<li>Обратная связь</li>
<li>О проекте</li>
<li>Рус</li>
<li>Узб</li>
<li>Eng</li>
</ul>
</div>
</nav>
</div>
#top-navbar{
min-height: 50px;
width: 100%;
background-color: #brand-blue;
.top-navbar-search{
width: 100%;
min-height: 50px;
padding: 0 70px 0 20px;
color: #fff;
background: #339dd1 url(../img/search.svg) no-repeat 97% 48%;
background-size: 22px;
font-size: 18px;
font-family: 'Light';
.placeholder({
color: #fff;
});
}
.top-navbar-links{
width: 100%;
text-align: center;
display: table-cell;
a{
padding: 0 10px;
font-family: 'Light';
color: #fff;
display: inline-block;
line-height: 50px;
font-size: 18px;
min-height: 50px;
float: left;
background-color: #brand-yellow;
.transition(background, 200ms, linear);
&:hover{
background-color: #d17a45;
}
}
}
}
#navbar{
background-color: #fff;
min-height: 70px;
width: 100%;
border-bottom: 1px solid #cbcbcb;
.navbar-brand{
width: 160px;
height: 41px;
background: url(../img/brand.svg) no-repeat center;
background-size: 100%;
display: inline-block;
margin-top: 16px;
}
.navbar-toggle{
width: 70px;
height: 70px;
float: right;
position: relative;
display: none;
span{
display: block;
width: 35px;
margin: 0 auto;
height: 4px;
background-color: #393939;
.transition(all, 200ms, linear);
&:before{
content: '';
top: 23px;
.bar;
}
&:after{
content: '';
bottom: 23px;
.bar;
}
}
&:hover{
span{
background-color: #brand-blue;
&:before, &:after{
background-color: #brand-blue;
}
}
}
}
.navbar-nav{
float: right;
display: inline-block;
line-height: 70px;
li{
display: inline-block;
&:first-child{
margin-right: 20px;
}
&:nth-child(3){
margin-left: 30px;
}
}
a{
display: block;
line-height: 70px;
color: #brand-black;
.transition(color, 100ms, linear);
&:hover{
color: #brand-blue;
}
}
}
}
Use bootstrap grid, an example:
<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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2" style="background-color:blue;"></div>
<div class="col-sm-7" style="background-color:lavenderblush;">Search</div>
<div class="col-sm-1" style="background-color:lavenderblush;">Button</div>
<div class="col-sm-2" style="background-color:blue;"></div>
</div>
</div>
</body>
</html>
P.S: below I have an answer with code how I would like to have it look like, but I do not think this is valid code?
I would like to have an interface(HTML5/CSS) that looks like MIRC fullscreen(see image below) and have searched all day even at stackoverflow
What I want is that the interface(GUI only) is fullscreen and that user(right) and chat window(left) have a scrollbar, but that the bottom bar where you type your message stays at the bottom.
Preferable it would only use CSS(but if javascript is needed I will allow it, but rather not) and it does not have to support any old browsers. I think this should be possible because mibbit
also has something that looks a lot like this.
I am wondering if there is any framework/library to help me create these kind of apps.
I have been toying around all day with CSS but can not get it to work and I think it is very easy for a CSS guru.
It was a lot of work(because I am junior CSS level), but this is what I could came up with:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Jsfiddle:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, html, body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
#wrapper {
min-height: 100%;
overflow: none;
}
#left {
float: left;
width: calc(100% - 200px);
height: calc(100% - 20px);
overflow-y: scroll;
}
#navigation {
float: top;
border-style: inset;
background: lightgrey;
padding: 5px;
height: 16px;
}
.img {
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
no-repeat;
vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */
}
#navigation li {
height: 32px;
margin-right: 5px;
float: left;
list-style-type: none;
margin-right: 5px;
}
#navigation a {
text-decoration: none;
text-align: center;
height: 16px;
}
.selected {
font-size: 14px;
padding-left: 5px;
display: inline-block;
vertical-align: center;
}
#messages {
height: calc(100% - 50px);
float: bottom;
list-style-type: none;
font-family: "verdana";
}
#users {
float: right;
width: 200px;
height: calc(100% - 20px);
overflow-y: scroll;
font-family: "monospace";
list-style-type: none;
}
#users li {
padding: 5px 10px;
height: 16px;
font-size: 16px;
cursor: pointer;
}
#messages li {
padding: 5px 10px;
height: auto;
font-size: 16px;
}
#bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
#message {
border-top: 1px inset;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="navigation">
<li>
<img class="img" src="" />
<span class="selected">
#Main
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Linus Torvalds
</span>
</li>
<li>
<img class="img" src="" />
<span>
#Bill Gates
</span>
</li>
</div>
<div id="messages"></div>
</div>
<div id="users">
Alfred<br />
Linus Torvald<br />
Bill Gates<br />
Steve Jobs<br />
</div>
<div id="bottom">
<form action="">
<input id="message" autocomplete="off" /><button>Send</button>
</form>
</div>
</div>
</body>
</html>
Also available on jsfiddle
P.S: Only tested thoroughly tested on Google Chrome(Version 47.0.2526.106 (64-bit Linux))
<html>
<style>
#wrapper{
width: 960px;
margin: 0;
border:dashed yellow;
background-color: orange;
}
header{
float: left;
width: 960px;
border: dotted blue;
}
nav{
float: left;
width: 960px;
border: thin double pink;
}
article{
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1{
float: left;
width: 100%;
text-align: center;
}
#psec1{
float: left;
width: 100%;
}
#sec2{
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2{
float: left;
width: 100%;
text-align: center;
}
#psec2{
float: left;
width: 100%;
}
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
</body>
</html>
Wrapper will not surround article tag and contents. I'm not sure if this is just a simple math error on my part, or if the I need to adjust the margins and float it. Either way, please help me out here.
Changes done in the code:
Removed all float:left from the style.As it bring the child element out of its parent
Gave display:inline-block for all sections so that they can come in one row if width is available by behaving as an inline element.
removed the ids sec1,h1sec1,psec1,sec2,h1sec2 & psec2 and added classes sec,h1sec & psec as they were having common styles and we should always use unique id for each element.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
}
header {
width: 960px;
border: dotted blue;
}
nav {
width: 960px;
border: thin double pink;
}
article {
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
.sec {
display: inline-block;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
.h1sec {
width: 100%;
text-align: center;
}
.psec {
width: 100%;
}
<html>
<style>
</style>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 1</h1>
<p class="psec"></p>
</section>
<section class="sec">
<h1 class="h1sec">Section 2</h1>
<p class="psec"></p>
</section>
</article>
</div>
</body>
</html>
You just need a method of "clearing the floats"...a so-called "ClearFix"
There are number of methods discussed here.
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
#wrapper {
width: 960px;
margin: 0;
border: dashed yellow;
background-color: orange;
overflow:auto;
}
header {
float: left;
width: 960px;
border: dotted blue;
}
nav {
float: left;
width: 960px;
border: thin double pink;
}
article {
float: left;
width: 730px;
margin-left: 115px;
margin-right: 115px;
border: groove black;
background-color: white;
}
#sec1 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec1 {
float: left;
width: 100%;
text-align: center;
}
#psec1 {
float: left;
width: 100%;
}
#sec2 {
float: left;
width: 270px;
height: 500px;
margin-left: 45px;
margin-right: 45px;
margin-top: 50px;
background-color: turquoise;
border-radius: 10px;
}
#h1sec2 {
float: left;
width: 100%;
text-align: center;
}
#psec2 {
float: left;
width: 100%;
}
<div id="wrapper">
<header></header>
<nav></nav>
<article>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
<section id="sec1">
<h1 id="h1sec1">Section 1</h1>
<p id="psec1"></p>
</section>
<section id="sec2">
<h1 id="h1sec2">Section 2</h1>
<p id="psec2"></p>
</section>
</article>
</div>
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 :)
Ok so as you all will see I am very new to this and am really struggling to get what I want here. I would like to know how to push the youtube video down inside of that div a bit farther. Anyways I'm sure this is a simple fix that I will get reamed for but I have searched and tried to understand what I have been doing wrong but it just isn't working out. Here is what I have so far.
<html>
<head>
<meta charset="UTF-8">
<title>James Photo Tab</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
article, div, h1, p {
margin: 0;
padding:0;
}
html {
background: url(images/grid.gif);
}
body {
width: 520px;
margin: auto;
background:white;
}
.one {
background:grey;
width:520px;
height:75px;
border-radius:15px;
position:relative;
}
.two {
background:#0000FF;
width: 50px;
height: 30px;
position: absolute;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:5px;
top:78px;
left:px;
}
.three {
background: rgba(227,208,123,.6);
width: 50px;
height: 30px;
position: absolute;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:5px;
top:78px;
left: 424px;
}
div {
clear: both;
}
p{ height: 50px;
line-height: 50px;
}
.three { background:#33FFFF;
}
.four { width:520px;
height:auto;
background:grey;
border-radius:0px 10px 10px 10px;
position: absolute;
top:160px;
}
.five {width: 400px;
height:233px;
background:black;
top:250px;
}
.six {width:450px;
height:75px;
background:#0000FF;
top:750px;
border-radius:15px;
position:static;
margin:10px;
bottom: 10px;
}
.like {width: 200px;
height: 45px;
background:#33FFFF;
border-radius: 5px;
position:absolute;
top: 15px;
right: 40px;
text-align: center;
font-size: 2em;
}
.tab1 {
width: 75px;
height: 45px;
float: left;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:8px 8px 0px 0px;
background:grey;
position: absolute;
top:115px;
left:368px;
}
.tab2 {
width: 75px;
height: 45px;
float: left;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:8px 8px 0px 0px;
background:grey;
position:absolute;
top:115px;
left: 445px;
}
/*add styles here*/
</style>
</head>
<body>
<article>
<div class="one">
<p>
<font size="10em" color="white">
BANNER IMG
</font>
</p>
<div class="like">
<p>
Like Counter
</p>
</div>
</div>
<h1 class="two">Share!</h1>
<h1 class="three">Like!</h1>
</article>
</body>
<body>
<article>
<h1 class="tab1"> Tab 1</h1>
<h1 class="tab2"> Tab 2</h1>
<div class="four" align="center">
<div class="five" align="center">
<div class="eight"><iframe width="400" height="233" top="50px" margin="40px" src="http://www.youtube.com/embed/ErkaM9IvZ7U" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="six" align="center" onclick="location.href='http://www.facebook.com';" style="cursor:pointer;">
<p><font size="30em" color="white">Share Button</font></p>
</div>
<div class="six" align="center" onclick="location.href='http://www.facebook.com';" style="cursor:pointer;">
<p><font size="30em" color="white">Share Button</font></p>
</div>
</div>
</article>
</body>
</html>
Adding some top margin to the div containing the youtube video would move it down. Not sure how far you wanted it but you can play around with the pixels.
.eight{
margin-top: 10px;
}