Ok, I'm fairly new to CSS and am following this Rollover Buttons code (http://www.elated.com/articles/css-rollover-buttons/). The thing is I want 9 buttons (3x3). If I repeat the code and rename the id's, they all repeat in line down the page. I'm thinking I want to make div's, but not sure where to go next.
HTML:
<a id="emailUs" href="#" title="Email Us"><span>Email Us</span></a>
CSS:
#emailUs
{
display: block;
width: 107px;
height: 23px;
background: url("emailUs.gif") no-repeat 0 0;
}
#emailUs:hover
{
background-position: 0 -23px;
}
#emailUs span
{
position: absolute;
top: -999em;
}
How would I now repeat this code so that I have 9 buttons in a 3x3 grid?
There is a lot of ways to go about this, the simplest would probably be to make three divs each being a row of three links. You can see it here on codepen
You can put all 9 a tags something like this<div id="wrapper"> 9*<a href="..."> </div>. Beacause your a tags are having fixed width (107px) you can force your wrapper to have fixed width of 240px, but you still have to remove display: block;
Try hacking this fiddle: http://jsfiddle.net/bk44c/
Other solution for your grid: add a float: left; margin: 5px to your a tags and increase the width of your wrapper width: 400px;
Regards
Related
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
So I'm trying to customize a slider that came in my wordpress theme with CSS. Right now, it displays three post thumbnails side by side. Unfortunately my featured images all have different aspect ratios, so I'm trying to create a kind of letterbox effect by giving the div that contains the image a fixed size (202px by 138 px) and a black background, and then centering the image within the div.
This is what I want it to look like:
Right now, all my images are aligned with the top of their container, so it looks like the shortest/fattest image just has a black bar at the bottom.
This is what it looks like right now:
I'm SO close. I've read up on vertical-align (I've already seen that "How Not to Vertically center Content" blog post [which I can't link to because of my awful reputation], which was useful and informative but didn't solve my problem), but at this point I'm just stuck.
My html looks something like this:
<ul class="slider">
<li>
<figure class="slide-image">
<a href="blogposturl">
<img src="blogimage" />
</a>
</figure>
//and then some other stuff//
</li>
</ul>
And then there's the CSS! My CSS looks like this right now:
.slider {
position: relative;
}
.slider li {
position: absolute;
}
figure.slide-image {
border-radius: 0px;
width: 202px;
height: 138px;
position: absolute;
background-color: #000;
}
.slide-image img {
border-radius: 0px;
position: absolute;
left: 0;
max-width: 202px;
top: 50%;
margin-top: -69px;
}
I basically followed phrogz's instructions. And yet, my image is still sitting there happily at the top of its container. I think the problem is that the image is inside a link tag? Or maybe it has to do with the container? I don't know. Can anyone help me?
I removed some of the absolute positioning on the img. Try this approach instead:
It uses display:table-cell, and vertical-align:middle for vertical centering.
Working example here - as you can see, it works for varying heights. I didn't change any HTML either.
figure.slide-image a {
display: table-cell;
vertical-align: middle;
height: 138px;
}
.slide-image img {
border-radius: 0px;
max-width: 202px;
vertical-align: middle;
}
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.
im trying to make a facebook like blue bar.
So, i noticed they make a blue bar with width 100%, and make a new div under it which selects half of the div like this(the light blue part is the new div)
So, then the text or link i put under the new div is alligned just like i want it.
How can i achieve this?
My HTML
<div class="topBar" >
<div class="bar_frame">
fuuu
</div>
</div>
And here is my CSS
.topBar {
background: #3b5998;
top: 0;
height: 36px;
width: 100%;
background-position: center;
position: fixed;
}
.bar_frame{
/* The new div code must go here but i dont know how to do this */
}
This will work. I'm assuming you just need to center a fixed-width div in its parent element? This is exactly how Facebook does it in your example, and this is how it is done in many cases:
.bar_frame{
width: 981px;
margin: 0px auto;
}
Demo fiddle
My code is something like the below. When theres 3 images everything is fine once theres 4 it gets full and moves the entire div.top into another row. How do i make the div inside top just start a new row instead?
I tried writing .top width=500px but once it hits or passes it instead the images inside are squeeze together instead of each being 150x150. I tried max-width on top instead and in opera and chrome i see the border of top as 500width but the images continue to render pass it. (i have a firefox problem with my div so the width looks fixed to something else).
So how do i make these divs go into another row? and not try to squeeze together
<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>
I may need more information here, it's hard tell exactly what's happening. A screen-shot perhaps?
I would probably start with something like this:
.top {
width: 500px;
overflow: hidden;
}
.top div {
display: inline;
float: left;
width: 150px;
height: 150px;
}
Here's a solution that might help (used it in my example, just customized to fit your example)
.top {
display: block;
padding: 0;
margin: 0;
width: 100%;
}
.top div {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 10px;
width: 47%; /* Not needed, but in my case I needed 2 columns */
}
Basicall, the .top div float: left; is what is making my images to go to next row if columns are full.