I want to vertical align the logo image to the bottom of the my navigation menu. I've tried vertical-align:text-bottom, but the vertical-align doesn't seem to work for me, because the ul not works like the normal p tag.
Anybody who can help me?
<a href="index.php">
<img id="logo" alt="logo" src="http://dyrholmkantinedrift.dk/img/kantinedrift_logo01.png" height="50">
</a>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Pellentesque</li>
<li>Aliquam</li>
<li>Morbi</li>
</ul>
The css:
header img {
float:left;
position:absolute;
}
ul {
height:50px;
position:relative;
}
ul li {
display:inline-block;
bottom:0;
}
Check this fiddle:
http://jsfiddle.net/Nh6NZ/
The key is you need to use display:inline-block instead of floating if you want to vertical-align those elements.and Also float and position absolute can't be used together.
Related
my html is
<div id="heading1">
<ul class="heading">
<li>Geelong</li>
</ul>
</div>
and css is
.heading {
font-size: 24px;
text-align: center;
list-style-image: url('img/stationary/marker.png');
}
If I do the css inline it works but not otherwise.
With that code:
<div id="heading1">
<ul class="heading">
<li>Geelong</li>
</ul>
</div>
.heading{
font-size: 24px;
text-align: center;
list-style-image: url('https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
}
The list is displaying correctly with Google logo as bullet.
It seems that your problem is the image's URL that is wrong. You may verify that it points to an image that exists (think that it's a relative link)
Using Twitter Bootstrap 3, I have a container, three div place holders, and three images that fill as links each floated side by side and taking up the entire row: When I minimize the screen to make it responsive, I only see the first image (the second two dissapear). What steps would I have to take to make sure that each image becomes responsive and sits one below the other at the minimize dmobile display screen.
Please Note: Each Img. already has class="img-responsive" applied to it.
HTML:
<!--Wide Display Container -->
<div class="wide-display">
<div id="firstholder">
<a href="home.html" title="Home" class="imglink"><img src="/images/slide2.JPG" alt="City Lights Image" class="img-responsive" id="electricone">
<div class="item1">
<h1 class="slickfont1" >First Title</h1>
</div>
</a>
</div>
<div id="secondholder">
<a href="office.html" title="Office" class="imglink"><img src="/images/ant.JPG" alt="City Lights Image" class="img-responsive" id="electrictwo">
<div class="item1">
<h1 class="slickfont1" >Second Title</h1> </div></a>
</div>
<div id="thirdholder">
<a href="reviews.html" title="Locations" class="imglink"><img src="/images/family.JPG" alt="City Lights Image" class="img-responsive" id="thirdelectric">
<div class="item1">
<h1 class="slickfont1" > Third Title</h1>
</div>
</a>
</div>
</div><!-- Wide Display Container -->
CSS:
.wide-display {
min-width:33%;
position: relative;
width: 100%;
height:100%;
margin-top:6px;
overflow: hidden;
height:366px;
}
/*! First img Holder */
#firstholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
margin-left:1px;
margin-right:0px;
}
.item1 {
width: 24%;
margin: auto;
position:relative;
}
#secondholder {
width: 450px;
height: 100%;
float:left;
display:inline-block;
margin-right:0px;
}
#thirdholder {
width: 449px;
height: 100%;
float:left;
display:inline-block;
}
You have to create Bootstrap Grid to make it work. You can just read the documentation here: http://getbootstrap.com/css/ it's pretty easy to understand. The divs that wrap you images need to have grid classes applied to them.
So, I'm working on making a "links" div on my site. (reference here) The links are all images, but for some reason the div they are contained in is unnecessarily long. The images are supposed to be about three times as long as they are now, but whenever I resize the div to make them bigger it overlaps the video and pushes it down.
The code looks like this:
<div class="links">
<ul>
<li><img src="Images/button_home.png" width="52%" height="69" style="width:15%;height:auto;" /></li>
<li><img src="Images/button_music.png" style="width:15%;height:auto;" /></li>
<li><img src="Images/button_films.png" style="width:15%;height:auto;" /></li>
</ul>
</div>
<div class="player">
<iframe src="http://www.youtube.com/embed/MTmUnOHs5Xs"></iframe>
</div>
And the css
.links {
float:left;
width:100%;
margin-left:0;
height:auto;
}
.links ul {
list-style-type:none;
margin:0;
padding:0;
}
.links img {
width:180px;
height:auto;
}
.player {
float:right;
padding:8px;
border-style:solid;
border-radius:31px 31px;
border-color:rgb(45,25,11);
border-width:2px;
margin-right:0;
width:45%;
height:45%;
}
.player iframe {
width:100%;
height:100%;
border:none;
}
So whaddup with that? It's been rustling my jimmies all day and I can't seem to find the problem.
Thanks!
Your style attributes located within the tags are overriding the stylesheets:
style="width:15%;height:auto;"
Takes precedence over:
.links img {
width:180px;
height:auto;
}
Why do you have the width of .links at 100%, changing this to 30% keeps the video from pushing down. Here's example of the change http://codepen.io/hwatkins/pen/qmzEB
So I have a button group with four buttons, third one has a drop-down menu, but I can't seem to align it center. The buttons are centered, but the drop-down menu aligns left. I have tried all sorts of css, but nothing has worked. Maybe somebody can help. :)
HTML:
<div class="btn-group">
Home
Link
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Linkk1</li>
<li>Linkk2</li>
<li>Linkk3</li>
</ul>
Link
</div>
Here's how I align button group center:
.btn-group {
margin: 0 auto;
text-align: center;
font-size:0 !important;
}
.btn-group a {
display:inline-block;
}
I have tried using the same method for drop-down menu, but with no luck. Please help.
Try wrapping the button group in a centered btn-toolbar container.
<div class="btn-toolbar">
<div class="btn-group">
...
</div>
</div>
.btn-toolbar {
text-align:center;
}
Working Example: http://jsfiddle.net/r26Zz/
I have an anchor element with in it a div "imgbox" containing an image and a caption, and a div "textbox" containing some text.
Now when I float the div.imgbox, the img element inside is no longer clickable; the caption and the text in the div.textbox is. This only happens in Internet Explorer; all other browsers work just fine.
Does anyone know what's causing this (and how to solve it)? Thanks!
here's the css and html I'm using:
<style>
.wrap a {
display: block;
overflow: hidden;/* makes this a wrap around floats */
cursor: pointer;
}
.imgbox {
float: left;
}
.textbox {
overflow: hidden;/* positions the div next to the float */
}
</style>
<div class="wrap">
<a href="#">
<div class="imgbox">
<img src="http://jaron.nl/misc/dummy.gif" width="80" height="45" alt="" />
caption text is clickable
</div>
<div class="textbox">
some text here
</div>
</a>
</div>
You are using Block element in div in between the img and a link tag .