I have a menu bar in which each button is an image floated to the right. It looks perfect in Safari, FF, and Chrome but in IE7 the buttons are grouped fine, but they appear about 50 pixels lower than the other browsers (out of the menu bar). Any tips on how to fix this? Thank you!
http://jsfiddle.net/mE2b8/
My CSS:
#menu {
width: 100%;
height: 58px;
background-color: #00653a;
}
#menu_mid {
width: 823px;
height: 58px;
margin: 0px auto;
background-color: #00653a;
}
.menu_links {
float: right;
display: inline;
}
HTML:
<div id="menu">
<div id="menu_mid">
<img src="assets/img/menu_rrt.gif" alt="RRT"/>
<img src="assets/img/menu_contact.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_news.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_about.gif" alt="Contact" class="menu_links"/>
<img src="assets/img/menu_home.gif" alt="Contact" class="menu_links"/>
</div>
</div>
The problem seems to be that the logo (or graphic with alt="RRT") does not have a width defined. I added an ID to the img element and then floated it left. Seems to be what you're looking for: http://jsfiddle.net/mE2b8/3/
Related
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.
Sorry if this is a stupid question, but for some reason after 5 hours of work I'm stuck with nothing working...
I have a header which has a logo and the telephone (both of which are images). I want the telephone to be at the middle right of header and then move to the left as the user resizes the window. But when I tried, it moves down. I'd like the logo to be positioned on top of ΛΟΓΙΣΜΙΚΟ and move with the menu (staying on top) as the user resizes.
Here is the site: http://www.altasoft.gr/index_.htm
Can this be done with JavaScript?
<div class="header">
<div style="position:relative; left:17%; top:10px; z-index:99;">
<img src="images/Altasoft_Logo.png" alt="" width="354" height="91" />
</div>
<div style="position:relative; left:80%; top:-30px; z-index:5;">
<img src="images/telephone.gif" alt="" width="142" height="16" />
</div>
</div>
.header {
margin: 0 auto;
padding: 0;
position: relative;
text-align: left;
width: 931px; /* make this same width than 'main content'*/
z-index: 10;
}
in your first divider, style it this way :
element.style {
/* left: 17%; */ /* remove the left:17% */
position: relative;
top: 10px;
width: 50%;
z-index: 99;
}
It will align your header and menu
My text have only 1 line and my picture will fit the container height. I want text and picture to align center vertically. I try margin top text class with negative value and position relative but nothing work what I really want.
jsfriddle here
HTML
<div id="friend_select">
<div class="Friend">
<img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
<span class="Name">First Name Last Name 1</span>
</div>
<div class="Friend">
<img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
<span class="Name">First Name Last Name 2</span>
</div>
</div>
CSS
#friend_select{ padding: 5px; width: 400px; height: 500px; }
.Friend{ height: 80px; }
.Friend .Name{ line-height: 80px; }
.Friend .Picture{ line-height: 80px; width: 80px; height: 80px; }
I propose this fix:
.Friend .Name{ line-height: 80px; vertical-align:top; }
Live demo here: http://jsfiddle.net/keaukraine/WNT7U/
Works in latest Firefox, Chrome and IE down to IE8. For IE7, apply this hack:
.Friend .Name { *zoom:1; }
I am trying to align the elements in the head portion of a webpage properly.
There are three elements placed inside a header div:
The site logo (as an image) wrapped in an anchor tag should be left justified.
A div that contains a bunch of vertically aligned menu elements right justified.
A form containing a search box and a go button. This must be centered horizontally in the page and show between to logo on the left and the menu items on the right.
All three elements should be justified to the bottom of the header div.
I have been wrestling with this but nothing seems to work. Can you please help? Thanks!
<div style="float: right;">
<ul>
<li>Menu item</li>
</ul>
</div>
<div style="float: left;">
<img style="border: 0;" src="something.png" />
</div>
<div style="width: 300px; margin: 0 auto;">
Search box
</div>
Just a quick mockup.
UPDATE: using table/table-cell trick to allow vertical-align: bottom;
You need to wrap your manu, logo and searchbox into <div> with display: table-cell; css rule.
The markup:
<div class="table header">
<div class="table-cell">
<div class="logo"> </div>
</div>
<div class="table-cell">
<div class="searchbox"> </div>
</div>
<div class="table-cell">
<div class="menu"> <br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>
</div>
and css:
.table {
display: table; /* our outer contaner should behave like table; */
width: 100%; /* set width to 100% */
}
.table-cell {
display: table-cell; /* our internal wrapper should behave like table cell to allow vertical-align */
vertical-align: bottom; /* align all elements vertical */
background: yellow; /* for debug purposes */
}
.logo {
float: left;
width: 100px;
background: green;
}
.menu {
float: right;
width: 100px;
background: red;
}
.searchbox {
margin: 0 auto;
width: 100px;
background: blue;
}
Complete example: http://jsfiddle.net/EREmH/4/
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/