I'm trying to display a nice box layout for my home page where I can add pictures or words to each box. I approached this idea with div's. All was going well until I tried to insert text into one of the middle div's (boxes). I'd love a hand because when I do that it screws up my whole orientation.
Here is my HTML:
<!DOCTYPE html>
<html lang:en>
<head>
<title>MitoGraphics | Branding and Promotions</title>
<link rel="stylesheet" href="main.css">
<link href='http://fonts.googleapis.com/css?family=Noto+Sans|Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<section id="navbar">
<ul>
<li>The Loop</li>
<li>Working With Mito</li>
<li>Promotional Solutions</li>
<li>Branding Elements</li>
</ul>
</section>
</div>
<div id="box_one"></div>
<div id="box_two"></div>
<div id="box_three"></div>
<div id="box_four"></div>
<div id="box_five"></div>
<div id="box_six"></div>
<div id="box_seven">
<P>Branding Elements</P>
<div id="box_eight"></div>
<div id="box_nine"></div>
<div id="box_ten"></div>
<div id="box_eleven"></div>
<div id="box_twelve"></div>
<div id="box_thirteen"></div>
<div id="box_fourteen"></div>
<div id="box_fifteen"></div>
<div></div>
<footer></footer>
</body>
</html>
Here is my CSS:
/****************************
NAVBAR
****************************/
#navbar {
background-color: black;
height:40px;
width:1454px;
margin-left: -30px;
margin-top: -16px;
border-bottom: 1px solid #ff0000;
}
#navbar ul {
text-decoration: none;
list-style: none;
}
#navbar ul li {
display:inline-block;
float:right;
color:white;
padding-right: 190px;
padding-top: 10px;
font-family: 'Comfortaa', cursive;
font-weight: 10;
}
#navbar ul a li:hover {
color:#000;
text-shadow: 0.1em 0.1em #fff;
font-size: 1.1em;
margin-top:-1px;
}
/****************************
HOME PAGE LAYOUT
****************************/
#box_one {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%
}
#box_two {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_three {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_four {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_five {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_six {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -8px;
max-width: 100%;
}
#box_seven {
height:285px;
width:285px;
border: 1px solid black;
background-color: #6666cc;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
.elementbox {
}
#box_eight {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_nine {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_ten {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
#box_eleven {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -8px;
}
#box_twelve {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_thirteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_fourteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
max-width: 100%;
margin-left: -5px;
}
#box_fifteen {
height:285px;
width:285px;
border: 1px solid black;
background-color: white;
display:inline-block;
margin-left: -5px;
max-width: 100%
}
Why not try some responsive CSS.
Heres an example http://jsfiddle.net/bluey/72pN4/
Obviously styling would need to be added to each section, but the desired layout should be what you require, and be more stable on more devices.
Example HTML
<div>
Header
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div class="section group">
<div class="col span_1_of_2">
This is column 1
</div>
<div class="col span_1_of_2">
This is column 2
</div>
</div>
<div>
footer
</div>
Example CSS
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
For more info and more CSS for various grid capabilities visit: http://www.responsivegridsystem.com/
Add vertical-align: top to your inline-elements and it should be fixed. You should also consider using a class on all of your 'boxes' so that you only have to declare the width, height, background, border, and display one time. See this reduced test case codepen http://codepen.io/the_ruther4d/pen/e1703f2d34dc7ece9cccaa8e4d360c51/
Related
HTML
<div id="header"><h1>Scott's Favorite Things</h1>
<div id="header2"><h2>Cars, Sports, and Music</h2></div>
</div>
CSS
div#header{
border:5px;
border-color: red;
border-style: solid;
}
h1{
float:right;
clear: both;
}
div#header2 h2{
float: right;
clear: both;
}
div#header2{
border:5px;
border-color: orange;
border-style: solid;
margin: 5px;
}
Here I post the link to the things I have and i want to:
Current result of mine
Result that I wanna make
Just use text-align: right instead of float: right and remove the default margin from h1 and h2.
Look at this snippet:
div#header {
border: 5px;
border-color: red;
border-style: solid;
}
div#header h1 { /* Added header to h1 because I dont want to style every h1 */
text-align: right; /* Changed from float to text-align */
clear: both;
margin: 0; /* remove the default margin */
}
div#header2 h2 {
text-align: right; /* Changed from float to text-align */
clear: both;
margin: 0; /* remove the default margin */
}
div#header2 {
border: 5px;
border-color: orange;
border-style: solid;
margin: 5px;
}
<div id="header">
<h1>Scott's Favorite Things</h1>
<div id="header2">
<h2>Cars, Sports, and Music</h2>
</div>
</div>
You have to create a nested HTML-structure an style each div via CSS.
The HTML:
<div class="main-wrapper">
<div class="head-wrapper">
Lorem Ipsum
<div class="small-head-wrapper">
Lorem Ipsum
</div>
</div>
<div class="content-wrapper">
Your Main Content
</div>
</div>
The the CSS:
.main-wrapper {
border: solid 5px green;
}
.main-wrapper .head-wrapper {
text-align: right;
border: solid 5px red;
padding: 5px;
}
.main-wrapper .head-wrapper .small-head-wrapper {
border: solid 5px orange;
}
.main-wrapper .content-wrapper {
border: solid 5px blue;
}
Check it out: https://jsfiddle.net/zxvvqszx/
I am trying to rescale images of the following div but the CSS style doesn't have any effect.
The div tags:
<article id="article_1">
<div id="div_article_1_fleche_haut">
<img src="images/haut.png" />
</div>
<div id="div_article_1_central">
<div id="div_article_1_central_fg">
<img src="images/gauche.png" />
</div>
<div id="div_article_1_central_carte">
<img src="images/r500_0.gif">
</div>
<div id="div_article_1_central_fd">
<img src="images/droite.png" />
</div>
</div>
<div id="article_1_fleche_bas">
<img src="images/bas.png" />
</div>
</article>
The CSS file:
#div_header_main {
width: 90%;
overflow:hidden; /**/
border: thin solid black;
padding: 5px 10px 0px 5px;
}
#div_header_left {
width: 800px;
float:left;
}
#div_header_right {
width: 300px;
float:right;
}
#div_header_right img
{
float:right;
clear:right;
padding: 10px 0 0 0px;
border: thin solid black;
height:80px;
}
#div_article_1_central_carte img
{
height: 25px;
}
This is the jsfiddle file:
http://jsfiddle.net/e7gvbz66/3/
I have updated your CSS file on jsfiddle.net/e7gvbz66/8/ its working fine now. Unnecessary characters were present in your CSS file, I have removed and just added some styles to show the changes.
#div_header_main {
width: 90%;
overflow:hidden;
border: thin solid black;
padding: 5px 10px 0px 5px;
}
#div_header_left {
width: 800px;
float:left;
}
#div_header_right {
width: 300px;
float:right;
}
#div_header_right img
{
float:right;
clear:right;
padding: 10px 0 0 0px;
border: thin solid black;
height: 80px;
/*added for testing*/
width: 40px;
}
#div_article_1_central_carte img
{
/*updated for testing*/
height: 55px;
width: 100px;
}
#div_article_1_central_carte
{
}
Please include a style like this in your CSS file then the style of img will apply correctly.
#div_article_1_central_carte {
}
Please check this image link :
http://postimg.org/image/4iooctxxt/
As you can see, I pointed out the 3 navigation breadcrumb.
How I am able to obtain this with CSS/CSS3 and HTML. How can this be done? If it's possible, how can it be done with a background image.
Try this HTML and CSS:
<html>
<head>
<style>
body
{
margin: auto;
}
#one, #two, #three
{
position: relative;
width: 200px;
height: 40px;
float: left;
background-color: #E6E6E6;
cursor: pointer;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}
#one
{
border-left: 1px solid gray;
}
#one:after, #two:after, #three:after
{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #E6E6E6;
left: 100%;
top: 0px;
content: "";
z-index: 1;
}
#one:hover, #two:hover, #three:hover
{
background-color: #4DB84D;
}
#one:hover:after, #two:hover:after, #three:hover:after
{
border-left: 10px solid #4DB84D;
}
#circle, #text
{
float: left;
}
#circle
{
position: relative;
background-color: white;
color: black;
border-radius: 50%;
width: 21px;
height: 21px;
left: 15px;
top: 50%;
margin-top: -12px;
text-align: center;
border: 1px solid gray;
}
#text
{
position: relative;
left: 20px;
top: 50%;
color: black;
margin-top: -11px;
}
#one:hover #circle, #two:hover #circle, #three:hover #circle
{
background-color: #009900;
color: white;
}
#one:hover #text, #two:hover #text, #three:hover #text
{
color: black;
}
#navigation
{
padding: 40px;
position: absolute;
text-align: center;
background-color: black;
border-radius: 10px;
box-shadow: 0px 0px 10px black;
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="navigation">
<div id="one">
<div id="circle">
<b>1</b>
</div>
<div id="text">
Connect with Facebook
</div>
</div>
<div id="two">
<div id="circle">
<b>2</b>
</div>
<div id="text">
Invite friends
</div>
</div>
<div id="three">
<div id="circle">
<b>3</b>
</div>
<div id="text">
Complete Profile
</div>
</div>
</div>
</body>
</html>
You can copy and paste this to see what happens in a new html document.
You can, of course, modify it to your needs.
EDIT: This is now a full template. To see, create a new html document, copy and paste the code, and open it.
include bootstrap file to your code. example:
<ol class="breadcrumb">
<li>Home</li>
<li>Library</li>
<li class="active">Data</li>
</ol>
it will create breadcrumb
I have a container div and 2 div's that should be the same height. #Sidebar div goes on the left where as #Content div should be to the right
whenever I add something to Sidebar it pushes down the content Div and am kind of stumped
<!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"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>
<style type ="text/css">
li
{
display:inline;
background-color: #c5e8cf;
}
a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}
a.side { border-bottom: 2px solid black;
background-color: #e3e7ec;
}
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
display:inline-block;
font-size: 20px;
background-color: #e3e7ec;
border-bottom: 2px solid black;
padding-bottom: 20px;
}
label.side:hover { background-color: #dde504;}
div#header {
position: float;
background-image: url("../images/header.jpg");
background-repeat: no-repeat;
border-bottom: solid 1px #999999;
height: 97px;
Width: 1000px;
margin-left: 114px;
margin-top: 10px;
background-size: 100%;
}
div#menu {
position: float;
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-left: 115px;
padding-top:5px;
background-color: #e3f6ea;
}
#menu-content {
margin: auto;
width:100%;
background-color: #c5e8cf;
}
div#container{
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}
div#footer { position: relative;
border: solid 2px #999999;
width: 996px;
height: 50px;
background-color: #FFFFFF;
margin-left: 115px;
}
#body { background-color: #6b86a3;}
</style>
</head>
<body id = "body" >
<div id="header"> </div>
<div id = "menu">
<div id="menu-content">
<ul>
<li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>
<li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>
</li>
<li><a class="menu" href="../images/header.jpg">View Applicants</a></li>
</ul>
</div>
</div>
<div id="container" >
<div id="sidebar">
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
<a class="side" href="#"><label class = "side"> Testing sidebar </label></a>
</div>
<div id="content">
</div>
</div>
<div id ="footer"> </div>
</body>
</html>
slightly new to css. Thank you
This would be more common of what you want to achieve:
CSS
#container {
border: solid 1px #999999;
border-top: none;
width: 998px;
margin-top: 3px;
margin-left: 115px;
}
#sidebar {
float: left;
width: 131px;
border: 2px solid #999999;
}
#content {
float: left;
width: 131px;
border-left: 1px solid #999999;
}
.floatClear {
clear: both;
}
HTML
<html>
<head>
<title>Page</title>
</head>
<body>
<div id="container">
<div id="sidebar">
Text
</div>
<div id="content">
Text
</div>
<div class="floatClear"></div>
</div>
</body>
</html>
What practically happens here is you line up two left floating <div>'s and use a float: clear; to rule out that block-type <div>'s wrap to a newline. They will only wrap upon each other if both their widths (including padding/margin/border(left/right)) will be a bigger sum than the #container it's width.
By adding more margin-left to the #content CSS you can put it anywhere you want, as long as there is space to contain it together with the #sidebar div.
Little Extra
To avoid the classical styling where padding/border make the width of your <div> even wider, you can use the newer box-sizing feature, where all padding and border width will be pushed to the inside, instead of making the box bigger than you specified in your CSS stylesheet:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
Demo Fiddle
float: top; is wrong;
float can be only left or right;
add float:right; to your sidebar and float:left; to your container
div#sidebar {
position: relative;
border:2px solid #999999;
Width: 131px;
padding-bottom: 1000px;
margin-bottom: -1000px;
background-color: #c5cfd9;
overflow: hidden;
float:right;
}
div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
float:left;
}
Learn Css
The max-height CSS Property should do the job.
set the max-height for both #Sidebar and #Content with equal value.
and you can add the overflow:scroll if you are expecting any of them to grow height than the max-height.
I want a container to be filled in a single line in the following way:
60px fixed yellow
And then of the remaining space:
20% blue
60% black
20% red
This is what I have so far (doesn't work):
CSS
body {
background-color: #fff;
padding: 0px;
margin:100px;
}
.container {
overflow: hidden;
padding: 0px;
margin: 0px auto;
width: 90%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 6px 0px #ccc;
}
.blue_container {
background-color: blue;
width: 20%;
float:left;
}
.black_container {
width:60%;
float:left;
background-color: black;
}
.red_container {
width: 20%;
float:left;
background-color: red;
}
.fixed_conatiner {
float:left;
background-color: yellow;
width: 60px;
}
.transparent_container[type="fixed"] {
padding:0px;
margin:0px;
width: 60px;
}
.transparent_container[type="avazmishe"] {
padding:0px;
margin:0px;
}
HTML
<div class="container">
<div class="transparent_container" type="fixed">
<div class="fixed_container"><br/></div>
</div>
<div class="transparent_container" type="resizable">
<div class="blue_container"><br/></div>
<div class="black_container"><br/></div>
<div class="red_container"><br/></div>
</div>
</div>
You were on the right track, all you have to do is subtract that fixed containers width from your fluid container with a left margin. Try this:
.transparent_container {
margin-left: 60px;
}
Here is your answer Meysam:
http://jsfiddle.net/EcZ5j/
HTML:
<div class="container">
<div class="transparent_container" type="fixed">
<div class="fixed_conatiner">
<br/>
</div>
</div>
<div class="transparent_container transparent_container_2" type="resizable">
<div class="blue_container">
<br/>
</div>
<div class="black_container">
<br/>
</div>
<div class="red_container">
<br/>
</div>
</div>
</div>
CSS:
.container {
overflow: hidden;
padding: 0px;
margin: 0px auto;
width: 90%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 6px 0px #ccc;
}
.blue_container {
background-color: blue;
display: inline-block;
width: 20%;
}
.black_container {
width:60%;
display:inline-block;
background-color: black;
}
.red_container {
width: 20%;
display:inline-block;
background-color: red;
}
.fixed_conatiner {
float:left;
background-color: yellow;
width: 60px;
}
.transparent_container[type="fixed"] {
padding:0px;
margin:0px;
width: 60px;
}
.transparent_container_2{
padding-left: 60px;
word-spacing: -1em;
}
.transparent_container[type="avazmishe"] {
padding:0px;
margin:0px;
}