i've built a 3 column layout.
I want to place some Text (heading) over the Image in the middlecontent. But everytime i resize the browser window, the text moves. Any suggestions? I thought, while placing the image in an absolute container (which is itself in an relative one) i can position any absolute layers without the elements moving. Any suggestions?
Here a jsfiddle: http://jsfiddle.net/Dkjsc/3/
UPDATE:
If we remove the height attribute from middlecontent, everything works fine. But is this a way to go?
HTML:
<div id="content" class="content">
<!--LEFT-->
<div id="leftcontent" class="leftcontent"> </div>
<!--MIDDLE-->
<div id="middlecontent" class="middlecontent">
<div id="heading" class="heading">Text</div>
<img src="images/Windows/Window_10.png" alt="" style="width:100%;">
</div>
<!--RIGHT-->
<div id="rightcontent" class="rightcontent"> </div>
</div>
CSS:
html, body {
margin:0px;
padding:0px;
width:100%;
height:100%;
}
.content {
position:relative;
width:100%;
height:100%;
}
.leftcontent{
position:absolute;
width:20%;
height:100%;
left:0%;
}
.middlecontent {
position:absolute;
text-align:center;
width:60%;
height:100%;
left:20%;
top:10%;
}
.rightcontent {
position:absolute;
width:20%;
height:100%;
right:0%;
}
.heading{
position:absolute;
text-align:center;
width:100%;
top:12%;
}
You need to put position relative on an element with a fixed size that you want it relative of otherwise it is relative to the window which keeps changing size
Related
I am using this code for a site I am developing. The problem I am having is scrolling up to the fixed panel div.
HTML:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
CSS:
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
Fiddle is here:
http://jsfiddle.net/ygw6b9ga/
Any ideas/help would be much appreciated!!
Clicking link anchor targeting different element in page tells browser to scroll viewport or corresponding wrapper so elements upper left corner (in LTR page) is visible. Fixed elements does not affect scrolling areas so targeting and focussing them does not initiate this routine.
In your example you could either target the #wrapper instead of the #a to re-reveal fixed header (…, fiddle) or resort to javascript (… fiddle).
So I have a header bar that's something like [IMG______TITLE______IMG]
I have something like this, where all 3 elements are in 1 div:
#left_image {
display:block;
width:80px;
height:100%;
float:left;
}
#middle_div {
width:1030px;
height:100%;
text-align:center;
display:inline-block;
}
#left_image {
display:block;
width:80px;
height:100%;
float:right;
}
But for some reason, only on IE, the last picture is on the next line, like:
[IMG_______title__________]
[______________________IMG]
You can see the last image is still going to the far right, but for some reason outside of the containing div...Any idea how to properly horizontally align these?
You can do this without floats, and some simple positioning:
<div class="wrapper">
<div class="left">Left things</div>
<div class="middle">Middle things</div>
<div class="right">Right things</div>
</div>
.wrapper {width:100%;background-color:#eee;position:relative;}
.left,.middle,.right {display:inline-block;padding:10px;}
.middle {text-align:center;}
.right {position:absolute;right:0;}
Here's a link to a demo: http://jsfiddle.net/76t8ca7h/
Updated fiddle: http://jsfiddle.net/76t8ca7h/3/
and new css:
.wrapper {width:100%;min-width:100%;background-color:#eee;padding:0;margin:0;overflow:hidden;}
.left,.middle,.right {display:inline-block;vertical-align:top;float:left;}
.middle {text-align:center;width:60%;}
.left,.right {width:20%;background-color:#ccc;}
.right {float:right;}
I wanted to fit this image (galeria.jpg) to the window but It adds scrolling panel at the bottom and the border over the menu. It shouldn't go like this...
HTML CODE:
<body>
<div class="tlo">
<div class="logo">
<img src="logo.jpg" />
</div>
</div>
<div class="galeria" >
<img src="galeria.jpg" />
</div>
<div class="menu">
<ul>
<li>STRONA GŁÓWNA</li>
<li>KONTAKT I LOKALIZACJA</li>
<li>ZAKRES CZYNNOŚCI NOTARIUSZA</li>
<li>OPŁATY W KANCELARII</li>
<li>PRZYDATNE INFORMACJE</li>
</ul>
</div>
</body>
CSS:
body {
background-color:#ffffff;
padding:0px;
margin:0px;
}
.logo{
position:absolute;
margin-left:-400px;
left:50%;
}
.tlo{
height:230px;
width:100%;
background: #e0e0e0;
}
.galeria{
width:100%;
}
JSFiddle: http://jsfiddle.net/SfG3A/
Try this
.galeria img{
width:100%; // Remove this and add below style
max-width:100%;
vertical-align:bottom; // to remove the white space below the image
}
When you give width 100% it takes the width of the image and when you give max-width it restricts the image to have the maximum width of its parent element.
You can add a overflow-x: hidden to the div who contain the galleria.jpg
http://jsfiddle.net/SfG3A/1/
I realize that already there is a lot of material on here pertaining to this issue, but I still am having trouble placing three divs side-by-side rather than stacked on top of each other.
http://jsfiddle.net/wkQv6/
<body>
<div id='boom'>
<div id='menutab' class='navbar'>
Menu
</div>
<div class='navbar' id='storytab'>
Our Story
</div>
<div class='navbar' id='contacttab'>
Contact
</div>
</div>
</body>
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div.navbar{width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:fixed;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
Change your css as below
#boom{background-image:url(http://therealchicagoonline.com/wp-content/uploads/2011/03
/Buca-di-Beppo-table_setting2.jpg);
text-align:center;
height:1000px;
width:100%;
background-repeat:no-repeat;
margin-top:0px;}
div {
float:left;
padding-right:10px;
color:#FFF;
}
Use CSS left property, left property sets the left edge of an element,Try this code:
Fiddle:
CSS:
#menutab
{
left:100px;
}
#storytab
{
left:250px;
}
#contacttab
{
left:400px;
}
HTML
Added a wrapper around menu items
<div id='boom'>
<div class="menu">
<div id='menutab' class='navbar'>Menu</div>
<div class='navbar' id='storytab'>Our Story</div>
<div class='navbar' id='contacttab'>Contact</div>
</div>
</div>
CSS
Change position to relative and if you want it in center just add the menu css as shown beow, now the menu items will be in center irrespective of screen size, no hard coded px is required
.menu {
width: 50%;
margin: 0 auto;
}
div.navbar {
width:100px;
float:left;
display:inline-block;
background-color:black;
opacity:.7;
position:relative;
z-index:1;
height:25px;
border-radius:0px;
border-right:white;
color:white;
font-weight:bold;
text-align:center;
line-height:25px;
vertical-align:bottom;
}
Demo
Position:fixed; is the reason for your problem
Change the CSS accordingly.
You need small change in your css
inside this
div.navbar{
Remove position:fixed;
}
Its working fine
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>