I'm using Twitter Bootstrap for my wordpress site. The problem is that I just made a div as a right side bar and placed some images onto it, which seems to work fine on my desktop but when I view it on my laptop it changes its position and goes downwards.
Here is my code for the div and image placements:
<div style="position:fixed; top:188px; right:0px; border:0px solid #f00; width:25px;"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/delhi.jpg" style="margin-bottom:5px;">
<img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/noida.jpg" style="margin-bottom:5px;">
<img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/jaipur.jpg" style="margin-bottom:5px;">
<img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/chennai.jpg" style="margin-bottom:5px;">
</div>
May this approach helps, If I wanna use pure css, it would be somthing like this:
HTML:
<div class="sidebar">
<div class="box">Your anchor tags here</div>
</div>
CSS:
html, body {
height: 100%;
}
div.sidebar {
position:fixed;
right: 0px;
width: 25px;
height: 100%;
border: 1px solid blue; /* just for developing, remove this later */
}
div.box {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
border: 1px solid #f00; /* depends on you ;) */
height: 100px; /* unfortunately you have to set height property :| */
}
A live example here ;)
Related
I'm trying to learn basic html&css and I was making a simple webpage with a navbar, but when I fix my header it goes over right side of the page.
<div ID="header">
<table ID="navbar">
<tr>
<td>Home</td>
<td>About</td>
</tr>
</table>
</div>
#header {
background-color: yellow;
position: fixed;
height: 35px;
width: 100%;
border-radius: 10px;
border: 2px solid red}
How can I fix this? Thanks.
Your Html file is correct but change in Css file.
CSS:
#header {background-color: yellow;position: fixed;height: 35px;width: 100%;border-radius: 10px;box-sizing: border-box;top: 0;left: 0;}
Past above code in your css file.
Here you can see working Demo.☺
add below css:
#header{
box-sizing: border-box;
top: 0;
left: 0;
}
box-sizing: border-box means that the width (100%) will contain border. Otherwise width of element would be 100% + 4px - and that is wider than your browser window
You may also get sick of default margin & padding setting in browsers, so i recommend to add:
html, body{
margin: 0;
padding: 0;
}
at the beggining of css file if you haven't already done this
You need to define spacing for left and right.
here i made a fiddle: https://jsfiddle.net/yq6zoyhk/
#header {
background-color: yellow;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
height: 35px;
width: 100%;
border-radius: 10px;
border: 2px solid red}
When you are using position:fixed you need to define the spacing from left and top, if you want it from left, add left:0; top:0; or if you want to center it then add left:0; right:0; top:0;
I need to insert photo in between divs (blue and light-blue) as in the following example.
I did it with absolute positioning:
HTML:
#*Blue and light-blue sections with photo*#
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd">
<div class="image">
<img src="/Content/pictures/MainPhoto.png" />
</div>
</div>
CSS:
.image {
position: absolute;
bottom: -100px; /* bottom space */
right: 100px; /* right space */
}
.image img {
display: block;
}
But this way doesn't work correctly when you change the screen resolution of the device.
I create JSFiddle with this example.
Could you please to suggest another way to resolve this problem?
I need to create responsive design without hardcoded values.
Thanks! :)
you could just use a background and a padding to keep image from sides : DEMO
HTML
<div class="imaged">
<img src="http://lorempixel.com/800/180/food/7"/>
</div>
CSS
.imaged {
padding:20px;
text-align:center;
background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
border:solid white 4px;
vertical-align:top;/* or display:block; + margin:auto;*/
}
from your fiddle: inset box-shadow in a single div works too : DEMO 2 / DEMO 3
<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
<img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>
HTML
<div class="container-box">
<div style="width: 100%; height: 120px; background-color: #0052a4"></div>
<div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
<div class="image">
<img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
</div>
</div>
CSS
.container-box {
position:relative;
}
.container-box img {
height:200px;
width:90%;
position:absolute;
top:20px;
left:5%;
border:3px solid #fff
}
Of course I'd never use inline CSS, but there you go. See fiddle here
I think this is what you are trying to do:
http://jsfiddle.net/dc6r1bny/
.image {
position: absolute;
bottom: 30px; /* bottom height */
left: 50%; /* position element 50% from left side */
margin-left: -421px; /* bring it back left half the image size */
}
Then for mobile, you will just need to use media queries to adjust the image size to be 100%, remove the margin, etc. when you hit roughly 842px.
add this css code to the image. it should work.
margin-right:auto;
margin-left:auto;
I'm looking for a CSS trick to fix ie8.
In the sample, i put a code to make two distinct column 'content' and 'menu'.
My problem on ie8 is that i have to change margin-left of content to 140px. < (If i don't do this, i don't get a correct margin on ie and content is on menu.)
But the div width doesn't change and that make a scrool bar on y axes that i don't want.
On others browsers, that make the job without specife the width and auto-width alone.
HTML :
<div class="menu">
Menu
</div>
<div class="content">
Content
</div>
CSS:
.menu {
width: 110px;
position: absolute;
top: 60px;
bottom: 0;
left: 0;
border: 1px solid red;
}
.content {
margin-left:110px;
border: 1px solid blue;
}
Any idea? Thanks!
JSFIDDLE
Here my fix for ie8
.l-content {
position: absolute;
top: 60px;
bottom: 0;
left: 5px;
right: 10px;
}
I am new to html. I'm making a header with a logo overlapped on an image slider. This is the way i tried by using the method here:
How would you make two <div>s overlap?
However, I still cannot get the logo overlapped on the slider.
Here's the link of how it looks now:
http://homebeta.site90.com/
HTML
div id="logo"><img src="engine1/logo.png" /></div>
<div id="content"> <div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1.jpg" alt="1" title="1" id="wows1_0"/></li>
<li><img src="data1/images/2.jpg" alt="2" title="2" id="wows1_1"/></li>
</ul></div>
<span class="wsl">Gallery Javascript by WOWSlider.com v5.0</span>
<div class="ws_shadow"></div>
</div></div></div>
CSS
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:940px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
font-size: 10px;
}
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#html, body {
width: 940px;
margin: auto;
}
#logo {
position: absolute; // reposition logo from the natural layout
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 2;
}
#content {
margin-top: 100px; // provide buffer for logo
}
your z-index is too low. your slide already use z-index.
try:
#logo {
position: absolute; // reposition logo from the natural layout
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 5000;
}
Might be a problem with a slider script: it could add it's own z-index for the images inside.
Adding z-index: 91; (or more) to #logo must solve the problem.
Since your Logo has a z-index of 2 you merely need to reset the z-index of the #content div
#content {
margin-top: 100px;
position: relative; /* required */
z-index: 1; /* lower than z-index of logo */
}
Just tried and tested this in chrome, FF and IE seems to work now
z-index: 90;
`
This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.
Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.
I find this an interesting problem, so I've spent some time debugging the design on your page.
Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.
Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):
1.) - The "container" div:
Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.
<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">
2.) - The left pane ("span-12" div):
<div class="span-12" style="float: left; padding-top: 17px; width: 470px">
3.) - The right pane ("span-12 last" div):
You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.
<div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">
4.) - And the iframe:
<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">
EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to #clairesuzy, I didn't find it myself.
http://jsfiddle.net/HZTTp/:
<!doctype html>
<html>
<head>
<title></title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
body {
padding: 0 !important;
padding: 30px 0 0;
}
#top {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
overflow: hidden;
background: gray;
}
html
>
body
#bot {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bot">
<object data="foo"></object>
</div>
</body>
</html>
You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of position:absolute.
HTML:
<div id="head"></div>
<div id="main">
<iframe src="http://i.reddit.com/"></iframe>
</div>
CSS:
body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }
Demo: jsfiddle.net/fErZY
A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.
There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that
So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area
and add these styles:
.container {
position: absolute;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
Here's a demo of this with your page code:
JSBin HERE
Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"
and to keep some general code in the answer.. a simplified demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FriendsConnect | My dashboard</title>
<style type="text/css" media="screen">
body {
background-color: #4DA2CA;
margin: 0px;
padding: 0px;
}
#mainbar {
background-image: url('http://friendsconnect.org/bar_fade.png');
background-repeat: repeat-x;
background-color: #494949;
padding-top: 6px;
height: 67px;
}
#infobox_left {
color: #444444;
margin-bottom: 15px;
padding: 15px;
background-image: url('http://friendsconnect.org/grp2.png');
background-color: #F2F2F2;
background-repeat: repeat-x;
float: left;
width: 440px;
}
#com-status {
border: solid 1px;
border-color: #3B7D99;
background-color: #4794B7;
padding: 15px;
float: left;
clear: left;
width: 440px;
}
.container {
position: absolute;
width: 950px;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div align="left" id="mainbar">Main bar</div>
<div class="container">
<div style="padding-top: 17px;" class="span-12">
<div id="infobox_left">
<font color="#000000">Welcome TEST, what's up?<br/></font>
SOCIAL POINTS <font color="#000000">0 Points</font><br/>
ACCOUNT STATUS <font color="#2C8231">No Problems Found</font><br/>
CONNECTBOX <font color="#000000">0 New Messages</font>
</div>
<div id="com-status">
<strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...
<div style="float: right;"><button>Close</button></div>
</div>
</div>
<div id="friend_pane">
<iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
which you can see:
JSBin Here
You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.
example: http://jsfiddle.net/pxfunc/KTwxb/
HTML:
<div id="header">Header</div>
<div id="wrapper">
<iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>
CSS:
html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}
#header {width:100%;height:73px;}
#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
http://jsfiddle.net/nERqu/
HTML:
<div class="top">
<p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>
CSS:
.iframeBottom {
height: 100%;
width: 100%;
position: absolute;
scrolling: no;
}
.top {
height: 73px;
width: 100%;
background-color: yellow;
position: absolute;
z-index: 999;
}
It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.
In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.
Play with this a bit, it should be a nice step in the right direction:
<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
<iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>