Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
Related
I'm trying to develop my first responsive website but I'm having some trouble (of course).
I need an element (sort of a menu) to contain 4 row of elements and each element has an image to the left and some text to the right. Now, the issue I'm having is that I can't seem to be able to make the elements center vertically correctly. I've tried several methods that seem to work for a lot of people so I thought I'ld ask if anybody knows why nothing seems to work for me.
This is what the image CSS looks like:
.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}
Here is the fiddle: http://jsfiddle.net/mampy3000/9JZdZ/1/
Appreciate any help!
since your elements are inline-block , you can inject an inline-block pseudo-element 100% height and vertical-align:middle it to img and span : DEMO
basicly (+ below update of your CSS):
.tablaBuscadorElementos:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.tablaBuscadorElementos {
height:22%;/* instead min-height so value can be used for pseudo or direct child */
border: 1px solid black;
padding:0px;
width:100%;
}
.tablaBuscadorElementos > span {
font-size:20px;
width:80%;
vertical-align:middle; /* align to next inline-block element or baseline*/
border:1px solid black;
display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
vertical-align:middle; /* align to next inline-block element or baseline*/
width: 20px;
height:20px;
}
.tablaBuscador, .tablaBuscadorElementos{
display:block;
}
.tablaBuscadorElementos:before {
content:'';
height:100%;/* calculated from 22% parent's height */
display:inline-block;/* layout*/
vertical-align:middle;/* align to next inline-block element or baseline*/
}
You can do this by adding this css to .tablaBuscador
position: fixed;
top: 50%;
margin-top:-100px; /* half of height */
More info here: How to center a table of the screen (vertically and horizontally)
The newer option would be to use calc() but you might run into browser support issues.
position: fixed;
top:calc(50% - 100px).
Here are which browsers support calc(): http://caniuse.com/#feat=calc
Your code needs a major tune-up. You are floating elements, using vertical-align on them, positioning them relatively with left, right, top, and bottom set to 0. None of these make any sense. Here's a cleaned up fiddle: http://jsfiddle.net/jL2Gz/.
And here's a tuned up code:
* {
padding: 0;
margin: 0;
}
body {
height:100%;
}
.tablaBuscador {
font-family: "Maven Pro", sans-serif;
height:200px;
width:40%;
}
.tablaBuscador > div {
border: 1px solid black;
padding: 10px 0;
}
.tablaBuscador > div > span {
font-size:20px;
width:80%;
border:1px solid black;
}
.tablaBuscador > div > img {
width: 20px;
height: 20px;
}
.tablaBuscador > div > * {
display: inline-block;
vertical-align: middle;
}
I want the first picture to be aligned to the right bored of the black div, but I can't move the picture "Char" from where it is.
http://www.charlestonshop.it/homepageteo.html
<style type="text/css">
html, body {
width:100%;
height:100%;
margin:0;
}
div#container {
height:100%;
}
div#container div {
width:50%;
height:100%;
float:left;
background-repeat:no-repeat;
background-size:contain;
}
div#container div#left {
/* background-image:url('http://www.charlestonshop.it/charback9.jpg');*/
background-position: right;
background-color: black;
}
div#container div#right {
/* background-image:url('http://www.charlestonshop.it/charback10.jpg');*/
background-position: left;
background-color: white;
}
.charleft img{
max-width:100% !important;
height:auto;
display:block;
}
.charright img{
max-width:100% !important;
height:auto;
display:block;
float:right;
}
</style>
Add the below to your css, if you already have rules in place- add the additional styles as outline below:
#left{
position:relative; /* have a reference point for child positioning */
}
.charleft img{
position:absolute; /* position absolutely */
right:0; /* position on the right hand side of the parent, #left */
}
The benefit of this as opposed to using float, is you wont have to either clear the float, or accommodate for any changes it may later inflict on your layout.
You have to add float: right to .charleft div which contains the image
.charleft{
float: right;
}
it's very easy to do, just add this to your css code.
#left > .charleft{
float: right;
}
That's all.
I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.
It is currently a fixed width layout.
Main styles that I've been playing with are:
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.
use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.
now position your aside to the top left of your #wrapper div
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).
section {
padding-right: 280px;
}
I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/
BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.
Morphius solution is the best so far - for an example, see
http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}
<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>
Change your styles to this
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
Live example
Maybe this would do:
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
live demo
I want to know the best way to achieve the below image in CSS+HTML.
I'm having difficulty explaining in words what I want, so I guess a picture would make it more clear:
While the second and third parts are doable. I'm curious to know the best way to achieve the first one (Blue menu). If i split my page into three parts (based on the menus), in the case of blue, my div items must float out of the horizontal width of the menu, but within the vertical.
Thoughts wise ones?
Working Fiddle
You can see i have used position:relative on parent and position:absolute on child to make it flow out of that li element.
ul {
list-style:none;
width:906px;
height:600px;
}
li {
float:left;
display:inline-block;
border:1px solid #ccc;
width:300px;
height:600px;
text-align:center;
position:relative;
}
.selected {
background:yellow;
}
.div {
position:absolute;
left:-150px;
width:600px;
height:80px;
border:1px solid #000;
background:#fff;
z-index:2;
}
#div-1 {
top:30px;
}
#div-2 {
top:140px;
}
#div-3 {
top:250px;
}
You can do it by position: absolute.
.blueDiv{
position:relative;
}
.innerDiv{
position:absolute;
top: (your choice);
left: 50%;
margin-left: -(innerDivSize / 2);
}
If you don't have the width of the elements inside ... you can try to push them to the left and right by:
.innerDiv{
position:absolute;
top: (your choice);
left: 0;
right: 0;
}
But that will work only if the parent element is not on the very left or very right of the page.
I am using the code below, but .under is not rising above (and covering up) #portfolio_content .img img as it should on hover.
#portfolio_wrap {
overflow:hidden;
width:980px;
float:left
}
#portfolio_content {
float:left;
clear:both;
margin:0 auto;
overflow:hidden;
width:650px!important
}
#portfolio_content ul {
list-style:none
}
#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
display:block;
float:left;
height:210px;
margin:0 35px 35px 0!important;
overflow:hidden;
padding:0;
width:307px
}
#portfolio_content .img img {
display:block;
position:absolute!important;
overflow:hidden;
z-index:3!important
}
#portfolio_content .img .title, #portfolio_content .img .title a {
font-size:22px;
margin:100px 0 10px 0;
float:left!important;
width:307px;
text-align:center;
position:relative
}
.desc {
font-size:13px;
display:block;
text-align:center!important;
margin:0 auto!important;
width:307px
}
.under {
z-index:2!important;
display:inline;
position:absolute;
width:307px;
height:210px
}
.under:hover { z-index:4!important }
Any thoughts? I am assuming this is related to z-index, but I don't know what I have done wrong.
Without seeing the page rendered, I would have to assume the problem is that you cannot actually hover over .under (z-index:2) as it is hidden under the #portfolio_content .img img (z-index:3) initially and therefore you would just be hovering the img instead.
You cannot hover over .under since it's always "under" your images, tw16 is right.
Instead of playing with z-indexes, try actually placing .under inside .img but on top of your images and with display:none, and then do something like :
.img:hover .under{
display:block;
}
I might add your markup isn't quite optimized and .img should be directly placed on the a tags, not on useless inside spans, which are waaaay too many anyway :)
Edit : (as answer to comment)
In case there is no image to show, your markup will be different (as i suppose generated by a server side script, like php) as when there is one to display (for instance you won't echo the img tag).
You can as well use that condition to write 2 differents classes, for instance .img and .no-img :
.no-img .under{
display:block;
}
.img .under{
display:none;
}
.img:hover .under{
display:block;
}