This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
White space at bottom of anchor tag
Check out this sample page here..
http://denise.brixwork.com/
For some odd reason, under that pic of that family, there's a gap before the grey border (5px #333) div that contains the image. I removed all margins, paddings etc. and it still wont' disappear. :(
Short of setting a fixed height on the #index_content div, which i don't want in case the image has to be re-sized later (which means double the work for me), how can I remove that gap while leaving it elastic?
My HTML Code:
<div id="index_content_container">
<div id="index_content">
<img src="http://denise.brixwork.com/images/index_photo.jpg" alt="Real Whistler Living - Real Estate for the Next Generation" />
</div>
<div class="clear"></div>
</div>
The CSS:
/* INDEX PAGE SPECIAL CSS */
#index_content_container {
position: relative;
width: 970px;
border: 5px solid #e1bb14;
left: -20px;
display: block;
float: left;
padding: 0px;
margin: 0px;
}
#index_content {
position: relative;
width: 960px;
border: 5px solid #333;
float: left;
display: block;
padding: 0px;
margin: 0px;
}
#index_content img {
padding: 0px;
border: none;
margin: 0px;
clear: none;
}
Try this:
#index_content img{
padding: 0px;
border: none !important;
margin: 0px;
clear: none;
display: block;
}
You only need display: block in your img tag, nothing else =)
Related
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
i have a webpage and use the <hr> tag for separation of content when the page is displayed on tablets. it look like this:
at the red rectangle the line should continue. however, it does not. what do i have to change in html/css in order to let the <hr> continue until the border of the page?
the page is here: http://crossroads-festival.org/test2015/en/film/almaen
please note to redue the browser width to at least 811px for the horizontal line to show up.
thanks for your help!
UPDATE:
the css for <hr> is
hr {
height: 0;
border: none;
border-bottom: 1px solid #c1c1c1;
margin-bottom: 1.5em;
background: none;
}
the css for the divider-mobile class is:
.divider-mobile {
margin-top: 3.125em;
margin-bottom: 3.125em;
overflow: visible;
border: none;
color: #888888;
background-color: #888888;
height: 1px;
width: 150%;
margin-left: -25%;
}
in the html i use it like this:
<hr class="divider-mobile">
In your CSS you have:
#filmcontent {
overflow-x: hidden;
}
That is preventing the negative margin on your <hr> from going to the edge of the page.
You'll also want to remove the width: 150%; and margin-left: 25% on the <hr> and instead do...
margin-left: -20px;
margin-right: -20px;
(Where 20px is equal to the padding on #content .entry-content)
That will get you your desired effect!
Recently took over a site from a new client. Trying to make two div's in the header. Left is the logo. Fine, no problem there. But the right div has two elements and they should both be on the right hand side of that div. Tried floating right and changing margins, padding, etc. Not much working. Big issue is the order should be social icons and then MailChimp widget and instead, it's in reverse. Here's what I'm currently using for my CSS for that area:
#theme-logo {
width: 50%;
float: left;
margin: 0;
}
#theme-header {
min-height: 60px;
}
#theme-header .tabcontent ul li.widget {
position: relative;
float: right!important;
padding: 0px 20px;
}
#theme-header .tabcontent {
position: relative;
float: left;
top:0px;
width: 50%;
}
#theme-header .tabcontent ul {
float: left;
list-style: outside none none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
Found it. The original theme had absolute positioning on the MailChimp widget's div. Like this:
#mc_signup { position: absolute; right: 0px; width: 226px; }
So I just deleted that line from the theme's CSS and problem seems to have been solved.
Never fun to take over a theme from someone else.
So, I got set of links set up like this. Apologies for bad names, but to keep it easy to understand, I chose to not to use real paths/names. However, all paths check out in when page is shown/used.
<nav>
<div class="center">
<img src="folder/image1.gif" alt="">
<img src="folder/image2.gif" alt="">
<img src="folder/image3.gif" alt="">
</div>
</nav>
Now, I want each image stick to each other, so that they form a one long bar. With the current set up, they all line up in the middle of the page in one row. However... there are spaces in between each. Here is the CSS:
.center {
margin: 0 auto;
text-align: center;
display: block;
}
a.navigointi
{
float:left;
margin: 0px;
padding: 0px;
}
img.navigointi
{
margin: 0px;
padding: 0px;
border: 0px;
}
However, if I designate images as navigointi class... they do stick together, forming a one long bar, but at the same time, it breaks the centering. All images float to left side of the screen. Even if I remove all content from the img.navigointi, so it becomes empty style, it still remains the same. If I don't give the images a class, they return to the middle, but once again with the spaces in between them.
Any idea what is causing the centering to break?
Here's a FIDDLE.
The line that removes the single space between the anchors is font-size: 0px;
(found on CSS-Tricks)
CSS
.center {
margin: 10px auto;
text-align: center;
display: block;
border: 1px solid black;
font-size: 0px;
}
.navigointi{
margin-left: 0px;
padding: 0px;
}
img
{
margin-left: 0px;
padding: 0px;
border: 1px solid red;
}
If I understand, you should use display: inline instead of float: left.
Here an example : http://jsfiddle.net/YTn2b/
I'm trying to create a fixed-position footer at the bottom of my page. but there's an issue with spacing below the image and the bottom of the viewpoint that is unwanted:
Base Image:
The Issue:
The padding below the image is unwanted.
HTML:
<div id="containerBarKonge">
<ul>
<li><img src="./kongelogo.png" /></li>
</ul>
</div>
CSS:
#containerBarKonge {
position: fixed;
bottom: 0px;
width: 100%;
z-index:9999;
padding: 0px;
margin: 0px;
}
#containerBarKonge > ul {
position: relative;
list-style-type: none;
padding: 0px;
padding-left: 2px;
margin: 0px 20px;
min-width: 1053px;
background-color: #900;
}
#containerBarKonge > ul * {
padding: 0px;
margin: 0px;
}
Try setting the vertical align to bottom on the image:
#containerBarKonge img { vertical-align: bottom; }
The issue comes from the image having a default property of "display: inline;" - which is the equivalent to saying "have this image run along like text."
Images should rarely be employed as inline containers. Instead, an image should be defined as either display: block or inline-block. This gives you much precise control over your iamges versus - just align this to the top or bottom. What if you want the image 1px from the bottom? With vertical-align you can not.
So the solution is to do the following:
#containerBarKonge > ul li {
display: block;
height: 20px; /* or however tall it is */
}
#containerBarKong > ul li img {
display: inline-block;
/* Assuming it is 18px tall and you want it at the bottom: 20 - 18 = 2px */
margin: 2px 0 0 0;
}
there you go. You have PRECISe control of the positioning of the image while it retains its ability to run along like text.