I have been reading a few different answers to this type of question, as well as researching a bit on how to fix it, but I feel that my code is probably pretty messed up by now. I can't get my divs to sit next to each other so that I can create another larger div beneath them. I am very new at this and have been following tutorials and class reading to get this far, so I am sure something fairly simple or dumb is wrong. I just can't figure it out :-/. Here is the jsfiddle link http://jsfiddle.net/betyB/1/
CSS:
body {
background-image: url(superhighway.jpg);
background-repeat: repeat-x;
background-attachment:scroll;
background-color:#000000;
background-attachment: fixed;
}
#main1 {
position:relative;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
margin: 5px;
border: solid 4px #323232;
padding: 10px;
overflow:hidden;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content1 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
#main2 {
position:top;
z-index:1;
width: 600px;
height: 400px;
background-color:#000;
border: solid 4px #323232;
padding: 10px;
margin-left:auto;
margin-right:auto;
margin-top:300px;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#content2 {
position:relative;
z-index:2;
top:-425px;
width: 960px;
height: 800px;
text-align:left;
color:#FFF;
font-weight: bold;
margin: 35px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Title Here</title>
<link href="MyStyle.css" type="text/css" rel="stylesheet">
<!--
<script language="Javascript" type="text/javascript">
<!--
alert("");
</script>
-->
</head>
<body>
<h1>My Ideal Job</h1>
<div id="main1"></div>
<div id="content1">
This is to test the content of the div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
<div id="main2" style="float:right;margin:0;"></div>
<div id="content2">
Testing number two div.
<li>one</li>
<li>two</li>
<p></p>
<li>a</li>
<li>b</li>
</div>
</body>
</html>
The first thing that you need to do is add the display: inline-block; property to your divs' CSS. Second, you may need to ensure that there is a whitespace (either via just adding a space or adding if that is not sufficient, in your divs.
Extra Info
Positioning divs can be very simple, or it can be very challenging depending on your implementation and what you are trying to achieve. Most of the time, when speaking generally about positioning divs side-by-side the simple answer is to use the display:inline-block property. However, if you are trying to space everything out evenly and provide the maximum amount of cross-browser support, the solution gets more complicated.
Check out this post. It provides a terrific description of the challenges and various solutions to positioning divs side-by-side with maximum cross-browser support. The post is primarily concerned with evenly spacing the divs, which you can decide to do or not to do, but it provides a lot of great background and extra info that you should know. I have used the described solution for over a dozen implementations.
Here is the code for that solution:
HTML:
<div id="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<span class="stretch"></span>
</div>
CSS:
#container {
border: 2px dashed #444;
height: 125px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
/* just for demo */
min-width: 612px;
}
.box1, .box2, .box3, .box4 {
width: 150px;
height: 125px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.box1, .box3 {
background: #ccc
}
.box2, .box4 {
background: #0ff
}
And here is a link to the fiddle that he provided: http://jsfiddle.net/EDp8R/3903/
ok so I made this pen for you: http://codepen.io/anon/pen/zpxJt it does what I think you want, but your html has several errors, missing you shouldn't be doing inline styles, I understand you're new to this so I get it. The layout you want to achieve can be difficult if your html structure is not correct.
Related
I have a header that I would like to keep centered inside a parent image div both horizontally and vertically at all times when the parent div does not have a fixed width and height but instead has a responsive width and height using Twitter Bootstrap 3.1's responsive columns.
HTML:
<div id ="firstholder" class= " col-sm-4 col-md-4 col-lg-4">
<a href="home.html" title="Home" class="imglink">
<div class="item1"><h1 class="slickfont1" >Home</h1>
</div><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" >
</a>
</div>
#firstholder {
display:inline-block;
float:left;
margin:0;
padding:0;
height:auto;
position:relative;
}
a.imglink {
background: #fff;
display: inline-block;
width:100%;
height:auto;
position:relative;
}
.item1 {
height:150px;
width: 150px;
margin: 0 auto;
position:absolute;
z-index:100;
vertical-align:middle;
}
.slickfont1 {
z-index:10;
color: #fff;
position:absolute;
font-family: 'Bowlby One SC', cursive;
font-size: 37px;
font-weight:lighter;
position: absolute;
text-shadow:0 0 0 transparent, -2px 2px 2px #1542bd;
}
Thanks :)
You can use this nice method by Chris Coyier at CSS Tricks, he uses percentages and CSS3's transform:translate to achieve what you need. Centering Percentage Width/Height Elements
Now as you're using Bootstrap, so you're to tweak it for yourself.
The code from Chris Coyier:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
}
Better to go to CSSTricks (using above link) and study the whole Post (you'll also find the reason of using it and why its better than other methods of centring).
I hope this helped you.
I am not sure if I understood you right, but let's start from here:
CSS:
div.center {
display: table-cell;
width: 200px;
height: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #000;
background-color: #ccc;
}
div.inner {
margin: 0 auto;
}
HTML:
<div class="center">
<div class="inner">
<div class="title">
Title Here
</div>
</div>
</div>
Is this what you are trying to do? assuming the gray background is an image? SAMPLE HERE
I have a problem. The answers to other people questions didn't solve my problem.
It's about image in my header, here's the code:
HTML
<div id="site">
<div id="header">
<img class="center" src="http://i.imgur.com/jfDhpP5.png"/>
</div>
<div id="mainNav">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</div>
</div>
CSS
#container{
width: 1000px;
margin: 1em auto;
}
#header{
display: block;
width: 1000px;
margin: 0 auto;
}
body{
background-color: grey;
color: black;
font-family: sans-serif;
}
img.center{
text-align:center;
margin: 0 auto;
padding:0px;
}
I also try this:
div#pictures {
text-align: center;
}
also not working... checked in firefox and IE, the newest versions.... o.O
Please help!
CSS for header
width:100%;
text-align:center;
CSS for your img
display:inline-block;
margin: 0 auto;
See example here
That said, merely having text-align:center; on your header should be find, as in here
To add to SW4's answer, there are various ways to align text with CSS.
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.d {
text-align: justify;
}
For anyone looking for a great, getting started resource, one I'd recommend is W3Schools.
Thanks to SW4's answer I was having a similar problem with a header image. I was using a rectangular image and also trying to make it circular. After fixing the image shape and sizing I then had an issue with getting centered in the .
Here's my code...
HTML:
<div class= "image-cropper">
<img src="#" class="profile-pic">
</div>
CSS:
.image-cropper {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
border-radius: 50%;
display:inline-block;
margin: 0 auto;
}
.profile-pic {
display: inline;
margin: 0 auto;
margin-left: -15%; /*centers the image*/
height: auto;
width: 250px;
}
-- somebody may have a better way of coding it out but after several attempts and messing around with the px and % I finally got mine to look the way I intended.
I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}
I am in the process of designing a website for a film that is being released, but I am having some problems with getting it to fit in all browser windows sizes and screen sizes. Essentially, the markup, for example for the splash page, has the films logo at the top of the page, a video (the films trailer) under it, then an enter button that takes the user to the homepage. All of these should be centered on all browser window sizes. However when I try different sizes etc. the content does not remain centered and the video moves off of it's background image. How would I fix that with CSS?
There are a few other pages as well i.e. synopsis, videos and then a page to donate to the project. I would like these to work in the same way, keeping content working correctly on all sizes. Thanks!
If you want to look at this and see what I mean, the link is http://rescuedthemovie.com/new/home. This is the dev page and has basically no final design so it is somewhat messy but you can see what I'm talking about.
jwinton
Sounds like a problem with the way you are positioning your elements on the page. Take a look at:
http://www.w3schools.com/css/css_positioning.asp
Just add this to whatever divs you want to be centered. This should work on all browsers and will keep everything centered no matter the resolution.
#div {
margin:0 auto;
text-align:center;
}
I would suggest using this for the main content div, so everything is centered, then creating separate divs for the video, links, etc. That way you can position those where you want them inside the centered div..
I don't understand your design. I see the following problems.
You have a div id="container" but the only thing it contains is the div id="fotter". All the rest of the elements are "outside" the container div.
You have a div id="logo" with a style of margin-top: 1%; margin-left: 25%;. How will this center it?
Your div id="slider" has position: relative; left: 26%; top: 3em; which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.
Your h1 has a margin: left; 300px;. Where exactly you want it to be?
Underneeth the h1 you have a elements which contain div elements? This is like a block level element inside a in-line elements. Totally wrong. These all a elements should be inside a div and than that div should be positioned.
Your div#footer is inside the
div#container. The div#foooter
has a style of position: absolute
while the div#container does NOT
have a position: relative. This
causes 2 things. The div#container
collapses as it does not have any
content and the div#fotter is
positioned relative to the browser
window.
you have 3 div#recent. The ID has to be unique. This is not allowed. Use calsses instaed.
I will give a skeloton on how to go about this.
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" />
</div>
<div id="nav">
<ul>
<li>home</li>
<li>synpsis</li>
<li>videos</li>
<li>blog</li>
<li>partner</li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks
I am trying to make the following design for a web site.
The last time I made a web site, everything was usually done using a bunch of tables to align the element on the page. I can understand that this is not how we roll in 2011, where it's all about the css.
I have tried to implement the following design using css, but I have not succeeded.
Can someone point me in the right direction?
The layout is located here: http://imageshack.us/photo/my-images/828/layoutcx.png/
Edit:
I forgot to include the CSS and HTML I had produced so far. (The wife distracted me by shopping orders.) Sorry about that. I never intended for anyone to do my work, although I can tell that someone has already done it. Very helpful indeed, thank you!
My issue was with the "float" attribute/property.
Although I can, by dissection of the various suggestions, tell that there are things like !important that really are important.
You start from largest, end with smallest, go from top, to bottom, as that is way, you should understand HTML.
I won't show you any serious tricks or CSS3 fastest-way-to-do stuff, that you will need to learn by yourself.
With such a tasks, you do, like you would write a document, at first, you write a content, second, you format it.
Begin with basic HTML, sand continue with some basic construction of frames:
<!DOCTYPE HTML>
<html>
<head>
<title>My layout</title>
</head>
<body>
<div id="zones_theSite">
<div id="zones_unb"><p>Universal navgiation bar</p></div>
<div id="zones_body">
<div id="zones_header"><p>Header</p></div>
<div id="zones_fnnb"><p>Flashing news navigation bar</p></div>
<div id="zones_fn"><p>Flashing news</p></div>
<div id="zones_main">
<div id="zones_lsb" class="column"><p>Left side bar</p></div>
<div id="zones_mp" class="column"><p>Main page</p></div>
<div id="zones_rsb" class="column"><p>Right side bar</p></div>
<div class="clearfix"></div>
</div>
<div id="zones_footer"><p>Footer</p></div>
</div>
</div>
</body>
</html>
And now, with formatting. CSS can do anything you like, with divisions (DIV).
<head>
<title>My layout</title>
<style type="text/css">
body {
background-color: #616161;
margin: 0;
}
div { position: relative; }
p {
margin: 0; padding: 3px;
color: #FFF;
text-transform: uppercase;
font-family: Verdana, sans-serif;
font-weight: bold;
}
.clearfix { clear: both; }
#zones_unb {
width: 100%;
background-color: #000;
line-height: 2em;
text-align: center;
}
#zones_body {
width: 1000px;
margin: 0 auto;
background-color: #616161;
}
#zones_body div {
width: 100%;
text-align: center;
}
#zones_header {
height: 100px;
background-color: #E20000;
}
#zones_fnnb {
background-color: #0078FF;
line-height: 2em;
}
#zones_fn {
height: 80px;
background-color: #003ACE;
}
#zones_main p {
color: #000;
}
#zones_main {
width: 984px!important;
padding: 5px;
background-color: #FFF;
border: 3px solid #000;
}
#zones_main .column {
float: left;
}
#zones_lsb, #zones_rsb {
width: 200px!important; height: 300px;
border: 3px solid #000;
padding: 5px;
}
#zones_mp {
width: 552px!important;
}
#zones_footer {
height: 80px;
background-color: #3FCE00;
}
</style>
</head>
Now, just replace last HEAD part with HEAD part in first HTML code and done. Next, you should seperate CSS to single .css file and tune it to your liking. :)
I think no one will give you the complete design, it's some heavy work.
You should have a look a this positioning tutorial to begin with. Then, if you have a precise question, come back here ;)
To create that layout and understand it, you are best off learning CSS as soon as possible rather than asking someone to create it for you. I'd recommend: https://developer.mozilla.org/es/learn/css
As a right direction push - the html would look something like:
<div id="navBar"></div>
<div id="middleBody">
<div id="header"></div>
<div id="newsBar"></div>
<div id="flashingNews"></div>
<div id="mainPage">
<div id="leftBar"></div>
<div id="rightBar"></div>
</div>
<div id="footer"></div>
</div>
And the CSS would be similar to:
#navBar {
width:100%;
height:30px;
}
#middleBody {
margin:0 auto; /* This will centre the middle body */
}
#header {
height:200px;
}
etc...
Such designs are easy to setup using CSS frameworks:
960 Grid System: http://960.gs/
Blueprint Framework: http://www.blueprintcss.org/
Something like this:
<html>
<head></head>
<body>
<div style="width:100%; height: 150px; background:#f00;">Header</div>
<div style="width:100%; height: 20px; background:#00f;"">Nav</div>
<div style="width:100%; height: 150px; background:#005;"">News</div>
<div style="width:100%;">
<div style="width:200px; float:left; height: 300px; border: 1px solid #000;">Left col</div>
<div style="width:200px; float:right; height: 300px;border: 1px solid #000">Right col</div>
Center text
</div>
<div style="width:100%; height: 150px; background:#0f0; clear: both;"">Footer</div>
</body>
</html>
This reproduces your layout reasonably well, with all the css inlined.
it is briefly something like:
HTML:
<div id="universial-navigation"></div>
<div id="wrapper">
<div id="header"></div>
<div id="navigation-bar"></div>
<div id="flashing-news"></div>
<div id="main">
<div id="left-sidebar"></div>
<div id="content"></div>
<div id="right-sidebar"></div>
</div>
<div id="footer"></div>
</div>
CSS:
* { margin:0; padding:0 }
#universial-navigation { width:100%; height:20px }
#wrapper { width:960px; margin:0 auto }
#header { width:960px; height:200px }
#navigation-bar { width:960px; height:40px }
#flashing-news { width:960px; height:150px }
#main { width:960px; height:100px }
#left-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#right-sidebar { position:relative; float:left; width:180px; overflow:hidden }
#content { position:relative; float:left; width:600px; overflow:hidden }
#footer { width:960px; height:100px }