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
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.
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.
Ran across an odd issue today. I've been working with a floated menu that works on everything I've tested thus far (not gotten to old IE versions yet...), except firefox. The page renders correctly when first loaded, but if the window is resized, elements with deterministic layouts (i.e. inline elements, divs with overflow:hidden, etc) affected by the floated element fail to update.
Anyone have a (preferably javascript free) workaround?
HTML:
<div id="leftBar">
<a>test1</a>
<a>test2</a>
</div>
<div id="bodyContent">
<div>
<div id="contenta">
Hello world!
</div>
</div>
<div>
<p>Paragraph test</p>
</div>
<div style="clear:both">
Enclosing div.
</div>
</div>
CSS:
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
}
#bodyContent > div {
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
jsfiddle here.
I'm not sure if this is what you're trying to achieve or not, but I would personally use a container for the elements.
#container {
width: 550px;
}
#leftBar {
float:left;
width:50px;
background:red;
height:75px;
}
#bodyContent {
margin:0 auto;
width:500px;
background:green;
overflow: hidden;
}
#contenta {
width:100%;
height:50px;
background:blue;
}
Then wrap your content in the container.
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.