On my wordpress Website Homepage I inserted a horizontal grey strip containing social network links. I want this to touch the edges of the page over-flowing out of the body, how can I achieve this?
This is the code I used;
.outer {
float: left;
width: 100%;
height: 80px;
background-color: #f8f8f8;
position: relative;
}
The .outer rule isn't the one you'll need to adjust. Looking in the 'styles.css' document find the rule that you've written for .socialstrip. (change the . to a #)
#socialstrip {
height: 80px;
background-color: #f8f8f8;
position: absolute;
left:0;
}
You won't need to do anything else because the class .outer that's applied to it already gives you a width of 100%. Be aware that when you give this element a position of 'absolute' the element below it will not recognize that the #socialstrip element is above it. It will appear to lay over top of it. To fix this just add more margin to the top of the .bottomstrip element. Like this:
.bottomstrip{
margin-top: 200px;
}
That should give you what you are looking for.
Related
I have an unordered list as a menu and the current item has a class active. I want the the active item to have a little box below it like in the image attached. How would I do this using just CSS? If there is no (good) answer I will go old-school and create an image as a background-image.
What you're describing can be done using a pseudo-element and positioning it relative to the element you're decorating: http://jsfiddle.net/fC7gn/
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
top: 100%;
width: 100%;
height: 10px;
background-color: blue;
}
You can add the following to your CSS:
a:hover{border-bottom:10px solid red;}
You can add the border-bottom style to any element. I attach it to the a tag so it spans the entire width of the content it contains.
Here's an example fiddle (don't mind the extra fluff)
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I'm having CSS question on aligning an element vertically.
Please take a look at this URL:
http://leisureonly.com/gravedigger/grow-up [Possibly NSFW]
If you look at the sidebar to the right, at the bottom there's a block with an image saying 'Grave Digger'. I want this block to be aligned at the bottom of the sidebar.
I've tried wrapping it in a div and applying vertical-align: bottom to the grave-digger element, but that doesn't offer the desired results.
What is the correct way of doing this?
Well, beginning with, sidebar_gravedigger is at the bottom of the side_bar, so, the first problem is that the sidebar is that long. If you want that element positioned at the bottom of the container (the parent container of the side_bar), I recommend this:
.sidebar_gravedigger {
position: absolute;
bottom: 20px; /*container padding*/
}
#sidebar {
padding-bottom: 500px; /*when the content is short, gravedigger won't be over the bar content.*/
}
.container{
position: relative;
}
Something like this might help:
.sidebar {
position: relative;
height: 100%;
}
.module {
position: absolute;
bottom: 0;
}
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block
I created a wordpress blog (http://raptor.hk), but i am unable to set the right sidebar into correct position. i think i have missed something in CSS. the DIV is named "rightbar". I would like the DIV to be positioned right next to the content, within the white wrapper. Also, support of fluid layout (not moving on browser resize) is needed.
the problem is solved (see my answer), but anybody can give better solutions?
You can try putting the following styles for the div id "rightbar".
position: absolute;
top: 200px;
right: 300px;
That will put the "rightbar" div at the top of the page, just under the header and to the right.
I found a solution.
I put the DIV just inside the #main DIV, and set the following:
position: relative;
margin-top: 0px;
margin-right: 5px;
float: right;
width: 200px;
border: none;
border-collapse: collapse;