I'm trying to build a site with a fixed left sidebar of 220px and a fixed page filling the rest of the screen. I'm attempting to fill the page section with an image and have information over the top. The code works fine in Chrome and Firefox but can't get to work in IE.
Can anyone offer any suggestions for a better alternative I'd imagine without using absolute divs?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrap">
<div id="sidebar">
<div class="logo">
<a id="logo"> <img src="LOGO.png"/></a>
</div>
<ul class="navigation red" id="red">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
<li>Shop</li>
</ul>
</div>
<div id="page" style="padding:0 !important;">
<img src="images/back.jpg" class="back" alt=""/>
<div id="center">
<div class="header">
<center> <h3 class="page_title">Website Title</h3></center>
</div>
<!-- services -->
<div class="section group">
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background:#FFF;
font-size:14px;
height:100%;
width: 100%;
}
div#wrap {
width:100%;
max-width:100%;
overflow:hidden;
margin:0 auto!important
}
div#sidebar {
width:220px;
height:100%;
float:left;
background: #FFF;
border-right:1px solid #2e2f2f;
position:fixed
}
div#page {
height:100%;
left:220px;
right:0px;
background: #FFF;
position:absolute;
padding:2% 5%;
}
div#center{
margin:0 auto !important;
width:100%;
height:auto;
z-index:1000;
background:rgba(255,255,255,0.5);
}
.group {
padding: 0 20px 0 20px !important;
position:absolute;
z-index:10;
bottom: 20px !important;
left:0;
right:0;
max-width:850px;
margin:0 auto !important;
display:inline-table;
}
.header {
padding:0 20px 0 20px !important;
position:absolute;
z-index:10;
top: 8% !important;
left:0;
right:0;
max-width:850px;
margin-left:auto !important;
margin-right:auto !important;
}
img.back{
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
}
.one_half {
font-size: 17px;
float:left;
width:50%;
overflow:hidden;
}
Been trying to get my head round this for a while now and not making any progress any help would be very appreciated.
Thanks!
--- EDIT ---
Don't think I made clear it's the group and header divs i'm trying to center and which aren't in IE
If this isn't what you want, I'd need you to explain your requirements better.
http://jsfiddle.net/HhddF/
.back {
background-color:#3D6AA2;
height:100%;
width:100%;
}
Related
I am trying to achieve the layout shown in the picture with CSS. I am currently using float:left; for both text sections with a width: 100%; but they keep moving below the fixed image on the left.
<div style="float:left;">
<div style="width: 100px; height: 200px;">
Some Image
</div>
<div style="float:left;">
<div style="float:left; width: 100%;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
</div>
This doesn’t need that much floating and/or explicit widths.
overflow:hidden can be used to make the element next to the floated image keep that reduced width, instead of being laid out under the whole image (which is the effect float normally has - the div itself would still go over the whole width, and only its content flows around the image.)
.container {
width: 250px;
outline: 1px dashed;
}
.container img {
float: left;
}
.container div {
overflow: hidden;
}
<div class="container">
<img src="https://via.placeholder.com/100x200">
<div>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
<p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
</div>
</div>
Well this is more style issue and can be done by making second div to align/float right. Further you can use width on outer div too.
<div style="float:left; width: 40%">
<div style="width: 100px; height: 200px;">
Some Image
</div>
<div>
<div style="float:right; width: 60%">
<div style="float:left; width: 100%;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
<div style="float:left; width: 40%">
<div style="width: 100px;">
Some Image
</div>
<div>
<div style="float:right; width: 60%">
<div style="float:left;">Some text</div>
<div style="float:left; width: 100%;">Some text</div>
</div>
Problem is Height 200px is remove than check please
body{padding:20px;}
body div{margin:5px;}
.main{display:block; border:2px #333 solid; width:100%; overflow:hidden;}
.vert{ padding:1%; border:2px #333 solid; width:20%;
height:200px; float:left; }
.vert img{width:100%}
.hor{position:relative; left:0px; righ:0px; width:66%; float:left; }
.hor div{border:2px #333 solid; width:99%; margin-bottom:5px; padding:5%;}
<div class="main">
<div class="vert"><img src="https://cdn4.buysellads.net/uu/1/3386/1525189887-61450.png"></div>
<div class="hor">
<div>Some Text some text some text</div>
<div>Some Text some text some text</div>
<div>Some Text some text some text</div>
</div>
</div>
I have a <Div> that I would like 2 images to be displayed in. The first one set in the top left and the other at the bottom right.
Ideally i'd like to do this on <Div> so that the content sits in it also and goes over the images.
I have managed to get the top left image in but I cant figure out how to get the bottom one in.
My CSS is
.tab-content > .tab-pane,
.pill-content > .pill-pane
{
display: none;
background-image: url("../images/brand/QuotationOpen.JPG");
background-repeat: no-repeat;
padding-top: 50px;
padding-left: 25px;
}
My HTML is
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent</li>
<li>Principled</li>
<li>Personal</li>
<li>Focused</li>
<li>Straightforward</li>
<li>Energetic</li>
</ul>
<div class="tab-content col-sm-9 col-md-8">
<div class="tab-pane active">
<h2>Heading 2</h2>
<p>Content here</p>
</div>
<div class="tab-pane" id="Intelligent">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Content here</p>
</div>
</div>
</div>
</div>
And this give me
I need to get the following image in the bottom right which also allows the text to over-run it
The image below is a mock-up I did in paint to show what i'm after
You can also do this by assigning two background images to the div.
.quote {
background-image: url("http://i.stack.imgur.com/kXynJ.jpg"), url("http://i.stack.imgur.com/aduet.jpg");
background-repeat: no-repeat, no-repeat;
background-position: top left, bottom right;
height: 200px;
width: 400px;
}
<div class="quote">Here is some text.</div>
If anyone is interested in a solution without the framework css-classes i created a demo jsfiddle:
http://jsfiddle.net/q5dn5589/
HTML:
<div class=wrapper>
<img src="http://i.stack.imgur.com/Smqyd.jpg">
<img class="image2" src="http://i.stack.imgur.com/aduet.jpg">
</div>
CSS:
.wrapper {
position: relative;
width: 499px;
height: 213px;
border: 1px black solid;
}
.image2 {
position: absolute;
bottom: 0;
right: 0;
}
solved it
try positioning two images absolutely and position its accordingly!
See jSfiddle
css
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
Snippet (see it full-screen for effect)
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
border:1px solid #ccc;
padding-top: 50px;
padding-left: 25px;
}
.tss {
position:relative;
display: flex;
height:300px;
}
h2 {
z-index:999;
display:block;
}
img.first {
position:absolute;
top:0;
left:0;
z-index:-999px;
}
img.second {
position:absolute;
bottom:0;
right:0;
z-index:-999px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-GP col-sm-3 col-md-4">
<li>Intelligent
</li>
<li>Principled
</li>
<li>Personal
</li>
<li>Focused
</li>
<li>Straightforward
</li>
<li>Energetic
</li>
</ul>
<div class="tss tab-pane" id="Intelligent ">
<h2>Heading 2</h2>
<img class="first" src="http://i58.tinypic.com/1zm2tmp.jpg" border="0" alt="Image and video hosting by TinyPic">
<img class="second" src="http://i62.tinypic.com/dyoopu.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
</div>
</div>
</div>
I have been trying to build a very simple layout where everything flows vertically but as soon as I add any content to one of the divs, it creates whitespace between the div below it.
Here is an image for an example: http://chriswebbonline.com/imagelinks/help.jpg
Here is my HTML
<body>
<div id="container">
<div id="header">
<p> </p>
</div>
<div id="chat">
<p>.</p>
</div>
<div id="footer">
<p>.</p>
</div>
</div>
</body>
Here is my CSS
body {
background-color:#777;
font-family:Verdana, Geneva, sans-serif;
}
#container {
width:100%;
}
#header {
text-align:center;
background-color:#000;
color:#FFF;
}
#chat {
background-color:#EEE;
}
#footer {
background-color:#000;
}
I would like to know how to stop the whitespace from automatically appearing.
~Chris
try
p {
margin : 0;
}
paragraph tag margin is not 0 by default
Just a hunch, but try:
<div id="header">
<p> </p>
</div><div id="chat">
<p>.</p>
</div><div id="footer">
<p>.</p>
</div>
(No whitespace between opening and closing tags.)
Fiddle Here
My question is, why is the headline text not showing under the thumbnails in IE (8 and earlier). Works fine in all other browsers.
HTML:
<div id="thumbsGrid">
<div class= "thumbs">
<a href="http://youtu.be/A30XhK8Vtmg">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png"id="1.thumb"/>
</a>
<h4>Ben</h4>
</div>
<div class= "thumbs">
<img src="http://www.jillmedinger.com/NCPIE/images/thumbs/shadowed/recoverythumb.png" id="2.thumb"/>
<h4> The Resonator</h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/re.html">
<img src="images/thumbs/door2/friendsThumbs.png"id="3.thumb"/>
</a>
<h4>RE-Covery</h4>
</div>
<div class= "thumbs">
<a href="/NCPIE/divedeeper2.html">
<img src="images/thumbs/door2/divedeeper2Thumb.png"id="5.thumb"/>
</a>
<h4> Dive Deeper </h4>
</div>
<!--thumbsGrid close-->
</div>
CSS:
.thumbs {
float:left;
width:100px;
height:100px;
margin-right:12px;
margin-bottom:0;
border:0;
padding:0;
}
#thumbsGrid {
float:left;
width:500px;
min-height:216px;
margin-left:110px;
border:0;
padding-right:40px;
background: black;
}
.thumbs h4 a {
color: #FFF;
}
And here it is live: www.jillmedinger.com/NCPIE/door2.html
It has to do with the filter on the .thumbs. The easiest resolution is to set position: relative to the h4 as this fiddle shows.
I'm having problems setting an image as the right hand border to #left in the example below. Currently the border appears but it is about 200px to the right, rather than 500px to the right.
Any idea what's going wrong please?
Thanks!
<html>
<STYLE type="text/css">
#wrapper, #left, #right, .sub_box
{ border: 1px solid black; }
.sub_box
{ float:left; }
#left
{ background: url("dots.gif") right repeat-y; }
</STYLE>
<div id="wrapper" style="width:882px">
<div id="left" style="width:500px;float:left">
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
<div class="sub_box" style="width:200px">
<p>sub box</p>
</div>
</div>
<div id="right" style="width:200px;float:right">
<p>Right column here</p>
</div>
</div>
</html>
Try this one...
background: url("dots.gif") 500px 0px repeat-y;
Or adjust, as you want.