I'm trying to tweak my site and have been sitting for a bit too long at the computer hence I do not know where my mistake is. Hoping someone could help out a person with basic knowledge of css.
Here is my css:
#body {float: left; width: 100%; min-height:100%;}
#header-wrap,
#slider-wrap,
#content-wrap,
#footer-wrap {
float: left;
clear: both;
width: 100%;
}
#header-wrap {
float: left;
width: 100%;
}
#header {height: 100px;}
#slider {height: 500px;}
#content {padding: 0; text-align: left;}
I wanted to add
position: absolute; top: 0px
to #slider-wrap so that it begins at the top right under the header but when I do that both the #content moves up and is placed directly under the slider?
What is the correct positioning for these objects so that they show in the following order:
1. header
2. slider (partially under the header)
3. content
and on pages with no slider the content should follow the header???
any clues for this noob would be much appreciated
This:
#header-wrap,
#slider-wrap,
#content-wrap,
#footer-wrap {
float: left;
clear: both;
width: 100%;
}
Means that all three rules are applied to all the four specified elements. If you add your position rule there as well it'll apply to all those elements.
Instead, try adding:
#slider-wrap { position: absolute; top: 0px }
Related
I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
I researched a lot and could not find the solution for my problem. The footer overlaps the fixed sidebar. I want to prevent divs overlapping each other. Could you please help me. Z-index does not solve the problem.
#sidebar {
margin: 140px 0px 0px 572px;
float: right;
width: 226px;
position: fixed;
}
#footer {
clear: both;
height: 55px;
width: 100%;
position: relative;
}
Make your sidebar opaque by giving it a background color or image.
for example: https://jsfiddle.net/a3t22856/
The piece I added is:
background-color: white;
I am fairly new to CSS and although I have found examples for centring a IMG within a DIV, because I have a float: right; on an outer DIV it doesn't work as I want. This basically makes the DIVs appear in the correct place, but the IMGs are not central.
Here is a CSSDesk link for an example of my scenario: http://www.cssdesk.com/2pgBf
I'm trying to get the green share icon to appear centered both vertically and horizontally within the outer red boxes (DIVs).
I'm sure there are lots of enhancements that can be made to my CSS, but please only answer with solutions to my problem (though feel free to comment on this post with tips for CSS).
Hope that makes sense....
You can do position: relative; on the parent and then:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
On the child, this will center it.
DEMO HERE
This will work just as well and no positioning needed.
JSFiddle Demo
.social-media-icon {
background: Red;
margin: 2px;
float: right;
display: inline;
position: relative;
}
.social-media-icon a {
display: block;
}
.social-media-icon a img {
width: 16px;
height: 16px;
display: block;
margin:5px;
}
When i need to do that kind of code i set the parent tag, in this case the DIV to position: relative and the image to position: absolute, top:50%, left: 50% and margin: half the dimension just do this in your code:
.social-media-icon{
position:relative;
}
.social-media-icon a img{
position:absolute;
top:50%;
left:50%;
margin: -8px 0 0 -8px;
}
The basic idea is to have one div floated to the left with static width and have the another floated to the right filling with its width the rest of the page. How can I achive this ?
So far I have used in css something like this:
width: calc( 100% - 325px );
but I am looking for the best cross-browser solution.
Just make left to float: left and the rest to overflow: hidden like this:
.left {float: left; width: 200px;}
.full {overflow: hidden; width: auto;}
http://jsfiddle.net/Riskbreaker/DdaPs/
You can also make them even by using display: table.....but you question was the one above.
Basicly it would be (with a gap of 1em in between):
.col1 {float:left;
width:325px;
margin :0 1em;
}
.col2 {overflow:hidden;
margin-right:1em;
}
a simple trick using margin
.sidebar{
position: absolute;
left: 0;
top: 0;
width: 325px;
}
.container{
margin-left: 325px;
}
a quick example
http://jsfiddle.net/s8nFX/1/
If you always know the width of your left column, something like this would be best:
#left_column
{
width: 325px;
float: left;
}
#right_column
{
position: absolute;
left: 325px; right:0;
}
So I have two elements floated next to each other and one has a set width and the other needs to be a percentage so that when the window/browser is resized the content will flow with it. However I am having trouble keeping the content floated next to each other when the window size is smaller than certain ratio.
Here is my css code:
.box {
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
background-color: blue;
}
p {
width: 95%;
float: left;
margin: 0;
padding: 0;
}
Is there a way around this? Here is my fiddle so you can see what is going on.
My example
If you make the size smaller you will see the P tag drops down below the box.
If the box is a fixed width you can use the following styles:
.item {
padding-left: 60px;
}
.box {
width: 50px;
height: 50px;
float: left;
margin-left: -60px;
background-color: blue;
}
p {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
http://jsfiddle.net/3QhzS/1/
otherwise you will need to add a little bit of jquery to it to add styles on the fly:
http://jsfiddle.net/3QhzS/6/
If you don't know the width of the div.box (as you stated in comments) then you can use position:relative to the p tag which will do the trick.
p{
position:relative;
/* anchoring top, left and right sides */
top:0px;
right:0px;
left:0px;
margin:0;
padding:0;
}
Working Fiddle
Working Fiddle(with two div's)