I have a problem. I'm making a website, and it has part which is transparent (png image). But if it covers other div, that said div part that is covered disappears. I've tried some things, and nothing helped. So...
Index.html
<div id="TopLine">
<div id="Logo">
<img src="images/logo.png" width="420" height="248"/>
<div id="Menu">
</div>
</div>
</div>
<div id="Main">
<div id="Content">
</div>
<div id="Twitter">
</div>
<div style="clear:both"></div>
</div>
base.css
#Main {width:70%; padding: 10px 0 0 0; margin:0 15% 0 15%; text-decoration:none; background:#663333; border-radius: 15px;}
#Twitter {width:auto; height:auto; max-height:450px; margin: 0 10% 0 60%; background:#00FF00; float:right;}
#Content {width:auto; height:40%; background:#00FF00; float:left;}
#TopLine {width:auto; height:auto;}
#Logo {width: 100px; height:100px; margin: 10% 0 0 15%;}
image:
The background is not disappearing, it doesn't have a background. Your "TopLine" element and its children should be inside of main, from there you may position your element as you please (probably using position: relative)
Related
I want to produce an image gallery style page for a responsive web site.
Depending on device and orientation the page displays between 1 and 4 images horizontally.
How can I achieve this and ensure that:
The space between the images remains equal
Each row is centered on the page regardless of device,
orientation and the number of images.
I would appreciate any pointers, as I am new to this I may have overlooked the correct terminology while attempting to find the answer using the search feature.
Thanks for your time and consideration.
#verwrapper {
text-align:left;
width:100%;
margin-left: auto;
margin-right: auto;
padding-top:20px;
overflow: hidden;
background: none repeat scroll 0 0 #FFFFFF;
text-align:center; /* for IE */
}
.ver{
position:relative;
border-bottom:2px solid #686868;
width:200px;
height:310px;
background-color:#fff;
margin-bottom:20px;
margin:0 auto;
padding:0 0.5em;
overflow:hidden;
float:left;
}
.verbild{
position:relative;
height:200px;
width:200px;
float:left;
outline:2px solid #C0C0C0;
outline-offset: -2px;
}
<div id="verwrapper">
<div class="ver">
<div class="verbild"><img src="image1.jpg" width="200" height="200" /></div>
</div>
<div class="ver">
<div class="verbild"><img src="image2.jpg" width="200" height="200" /></div>
</div>
<div class="ver">
<div class="verbild"><img src="image3.jpg" width="200" height="200" /></div>
</div>
</div>
Nick
Use same padding for right & left side(em or %), use margin:0 auto. like that -
.test1{
margin:0 auto;
padding:0 0.5em;
}
Try this. Just change sizes as you need.
<div class="row">
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
<div class="image">
<img src="http://placehold.it/350x150"/>
</div>
</div>
<style>
.row {width: 500px; margin: 0 auto;}
.image {width: 25%; float: left;box-sizing: border-box; padding: 0 5px;}
.image img { width: 100%;}
</style>
I'm trying to recreate a web page with a three column design like the page below, but i'm having some trouble. I've tried using nested divs, but the code does not seem to be working for some reason. Here's a snippet of the html and css code
<body>
<div id="container">
<header>
<h1>The CIS 4004 Newsletter</h1>
</header>
<div id="wrapper" role="main">
<nav>
<ul>
<li>Test link; </li>
</ul>
</nav>
<article>
<div class="inner">
<h2>Test header</h2>
<p>Just some test text.
</p>
</div>
</article>
</div>
</div>
</body>
css code is here
#wrapper {
border: 1px solid black;
position:relative;
width:960px;
margin:0 auto;
overflow:hidden;
}
nav{
width: 150px;
float: left;
border: 2px solid black;
position:relative;
}
article.inner {
margin:10px;
padding:20px:
border: 2px solid red;
}
Here's an image of the web page
http://jsfiddle.net/2yjhp/
The simple template
<div class="wrapper">
<div class="left">Left Content</div>
<div class="middle">Middle Content</div>
<div class="right">Right Content</div>
</div>
---CSS---
div.wrapper {width: 1000px; margin: 0px auto;}
div.left {width: 250px; float: left;}
div.middle{float: left;}
div.right{width: 250px; float: left;}
Whether your designing a three column layout or a two column layout the key thing to remember is to floating all the columns in the same direction (left) and adjusting there width accordingly. There is no need to use nested div.
eg:
cloumnone{float: left;
width: 33%;}
similary for other two cloumns...
I am applying box shadow on the mainContent div which contains 6 other divs but the box shadow is applied to the section of the mainContent div just above the last two floating divs.
jsfiddle
HTML:
<div id="mainContent">
<div id="div1">
<h1>Welcome to the Archive </h1>
<h2>The Internet Archive, is a digital library of files and other cultural
artifacts in digital form.</h2>
</div>
<div class="div11">
<h3>Archive 1</h3>
<p>some info</p>
</div>
<div class="div12">
<h3>Archive 2</h3>
<p>info</p>
</div>
<div class="div13">
<h3>Archive 3</h3>
<p>info</p>
</div>
<div class="left">
<h4>Jasdasdasdasd</h4>
<p><em>some info on how to use the website</em>
</p>
</div>
<div class="right">
<h3>archive1</h3>
<p>Most recently added archives comes here</p>
<br />
<h3>asdasdsd</h3>
<p>Most recently added archives comes here</p>
</div>
</div>
CSS:
#mainContent {
width:970px;
padding-bottom:55px;
/*equal to footers height*/
background:#fff;
margin-bottom:10px;
padding:10px 10px 10px 10px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
box-shadow: 0 0 20px #ccc;
}
.left {
float: left;
width: 250px;
height:auto;
}
.right {
float: right;
width: 630px;
margin: 0 0 20px;
height:auto;
}
Add:
<div style="clear: both"></div>
at the bottom above the close of the div.
http://jsfiddle.net/3LxkY/2/
try this.............
#mainContent{
width:970px;
padding-bottom:55px;
/*equal to footers height*/
background:#fff;
margin-bottom:10px;
padding:10px 10px 10px 10px;
-moz-border-radius: 5px;
border-radius: 5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
box-shadow: 0 0 20px #ccc;
overflow: hidden;
}
.left{
float: left;
width: 250px;
height:auto;
}
.right{
float: right;
width: 630px;
margin: 0 0 20px;
height:auto;
}
Look at the html and css below. I have set the width of the #wrapper to 990 px and complete width of center columns is 960 px. Margin of 15px is there in both sides. So, wrapper div's background color should be showing up there behind the #left and #content divs. However if i set the height of #wrapper it does show the background. But i want it to be shown as full.
I am just a beginner in CSS layouts.
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#header{
margin:0 auto;
width:100%;
background:#efffff;
height:100px;
}
#footer{
margin:0 auto;
clear:both;
width:100%;
background:#ccc;
height:100px;
}
#wrapper{
width:990px;
margin:0 auto;
background:#000;
display:block;
}
#left{
margin:0 0 0 15px;
background:#eeffee;
width:200px;
float:left;
}
#content{
margin:0 15px 0 0;
background:#eeeeee;
width:760px;
float:left;
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="wrapper">
<div id="left">
left
</div>
<div id="content">
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
content<br/>
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Because the Wrapper contains floated elements, you will need to 'clear' these elements, otherwise the wrapper will not wrap around them. There are multiple ways of doing this, however the most accepted way is to use a clearfix class on the wrapper.
Add the following code to your css:
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
Then set the class="clearfix" on the <div id="wrapper"> element. so it will become:
<div id="wrapper" class="clearfix">
This particular solution is known as the micro clearfix hack, more info can be found here:
http://nicolasgallagher.com/micro-clearfix-hack/
Here is a jsfiddle to show the result:
http://jsfiddle.net/PWQru/1/
Also, take a look at some previous questions that answer the same question. E.G. What methods of ‘clearfix’ can I use?
There is some good discussion in that question about the various methods.
Add height: 100%; to #left .
Resulting style will be
#left
{
background: none repeat scroll 0 0 #EEFFEE;
float: left;
height: 100%;
margin: 0 0 0 15px;
width: 200px;
}
Hope this helps.
That is because your content and left divs are floated. You will have to introduce a div at the end of both the floated divs to make the wrapper cover these two divs.
<div id="wrapper">
<div id="left">
left
</div>
<div id="content"></div>
<div style="clear:both;"></div>
</div
I'm struggling with an IE6 float issue. (I know IE6 sucks but my huge company uses it..) I've created a simple, header, body, footer layout, with a content area and sidebar within the body. Essentially a common blog layout.
I've had no problem achieving this in IE6 but within the content area I've tried to create a featured area div across the top, then below it two divs side by side. It looks fine in modern browsers but in IE6 it puts the 2nd div below the 1st. Like the divs are too big for the container so it pushes the 2nd. But that shouldn't be the issue since they are both small enough (width, padding, margin) to fit..
And here's my code:
HTML
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
<div class="clear"></div>
<div id="#1">
</div>
<div id="#2">
</div>
</div><!--Content End-->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!--Body Content End-->
</div><!--Page Wrap End-->
</body>
CSS
#page-wrap {
width: 960px;
margin: 0 auto;
background-color: #fff;
}
#header {
width: 954px;
height: 50px;
padding: 10px 0;
margin: 0 3px 2px 3px;
border-bottom: #7E7871 dotted 3px;
}
#content {
float: left;
width: 650px;
margin: 0;
padding: 15px 5px 0 15px;
}
#feature {
width: 650px;
margin: 0;
}
#content #1 {
border-right: thin solid #CCC;
width: 305px;
margin: 0;
padding: 0;
float: left;
}
#content #2 {
width: 305px;
margin: 0;
padding: 0;
float: right;
}
#sidebar {
float: right;
width: 250px;
padding: 0 10px 20px 10px;
margin: 0;
background: url(../_images/bg_aside.gif) repeat-y;
}
Since you haven't provided much detail as to how your HTML/CSS doesn't work in your browser, the only error I can find in your code is you have a stray </div>:
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
</div>
<div class="clear"></div>
<div id="programs">
</div>
<div id="discounts">
</div>
<div class="clear"></div>
--> </div><!-- THIS ONE! -->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!-- Body content end -->
</div><!-- Page wrap end -->
</body>
One of the reasons it will dip below is due to content being larger than the div.
However, your css does not match the provided HTML. It's hard to debug some of this without the actual content.
Assuming #2 and #1 are #discounts and #programs, I suggest adding an overflow: scroll; to see how it changes.