I have a logo that I want to link back to my home page. However, when I hyperlink the logo, I notice that the link spans across the entire page (i.e. across the whitespace to the left and right of the logo) instead of just being on the logo image.
My HTML:
<a href="#" id="splash-logo">
<img src="images/splash-logo.png" width="259" height="51">
</a>
My CSS:
#splash-logo {
clear: both;
width:100%;
display: inline-block;
text-align:center;
}
Thank you!
Get rid of the width:100%, since it is 100% width, of course it will span across (horizontal) the page
Your link's width is the width of the parent tag. Instead of doing 100%, just specify the width of the block.
Related
I have a banner which I want to add to my simple website , here is what I have so far
HTML
<div class="col-lg-12 main-banner">
<a href="https://www.google.com">
<img src="images/Test_09-17.png"></a>
</div>
CSS
img{
width: 100%;
object-fit:contain;
}
I want the image to fit with the div, unfortunately right now i have little space left and right side.
Check the image:
Question
What is wrong with my code?
It looks like there is padding on your image. (Based on the green to the right and left of your image.). Did you check the computed padding on the image element in your browser?
Without being able to see the HTML and CSS for the page I cannot be certain though.
Solution:
There was default padding either from the browser or other code. Setting the padding to 0 resolved the issue.
I’m having trouble getting one div not to lie on top of another div. I have the following
<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>
with the accompanying CSS …
#rightNavSection {
float: right;
}
However, when I add this div underneath, it lines up on the same vertical plane as the nav div.
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>
Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?
That's because of float: right and you can fix that if you add overflow: hidden on header DEMO
header {
overflow: hidden;
}
Have you tried the z-index property ? It is a property that decides what order are the elements aligned in the "front-back" axis.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have an HTML Document and a CSS Document and I'm trying to remove a large margin in between the image I've placed and the text below it. When I adjust the pixel margin on the top of the image it adjusts, but I've tried a few things on the bottom of the image and just can't seem to get it to work right. There is a huge gap and I just want it to look "normal". That is, having a smaller margin between the img and the text below it.
<div id="header" class="container">
<!--Home Logo -->
<a href="#">
<img src="http://www.satckoverflow.com/wp-content/uploads/2015/02/Stack-Overflow-Logo.png" style="position: relative; top: -150px;" alt="Platinum Imprints">
</a>
<p>Welcome! Here at Platinum Imprints we specialize in Custom Screen Printing. Use anywhere from one to many colors on a simple shirt.</p>
This is what I have for HTML.
You have inline styles on the img element that are setting relative positioning. Removing this will fix your problem.
Remove the inline style position: relative; top: -150px; in the img tag to remove the spacing.
I have a <div> positioning issue on single-page web design. To be more specific — I can't find a way to fill the background properly, using the <div>s.
For some reason, the <div>s won't fill the background as I want — the background always stays visible (on left/right and top/bottom sides of the <div>s).
What I'm trying to achieve:
My entire page is a single-page website. The page is composed of 5 rectangle <div>s, "touching" each other in a vertical fashion (0 pixels of background between them). I don't want the background to be visible at any part of the page.
I want the top <div> to fill the upper part of the screen ("touch" the browser's upper menu) and the right/left sides.
I want each one of the 3 middle <div>s to "touch" the left and right sides of the screen (and of course touch the two <div>s above and below, without any space between them [no background seen]).
I want the bottom <div> to fill the lower part of the screen ("touch" the browser's lower menu) and the right/left sides.
I've tried to change the position value on the CSS part. The outcome was always a "twisted" version of the page.
My HTML code:
<div id="page1" align="center">
<a id="about"></a>
</div>
<div id="page2">
<a id="portfolio"></a>
</div>
<div id="page3">
<a id="Dream"></a>
</div>
<div id="page4">
<a id="contact"></a>
</div>
<div id="page5">
<a id="Love"></a>
</div>
My CSS code:
#page1{
height : 1000px;
background-color: #4c3719;
}
#page2{
height : 1000px;
background-color: #9a8479;
}
#page3{
height : 1000px;
background-color: #ddbad8;
}
#page4{
height : 1000px;
background-color: #ddd28d;
}
#page5{
height : 1000px;
background-color: #ed9aa9;
}
Write before all CSS code this
* {
margin:0;
padding:0
}
If I correctly understand this may help
I have a <ul> with two columns
Code:
<li class="clearfix">
<div class="product-copy">
Product Content Here
</div>
<a href="">
"PRODUCT IMAGE HERE"
</a>
</li>
The .product-copy expands to content in height, width is fixed.
I want to be able to vertically align the image within the anchor to center. So no matter how large in height the .product-copy is, the image in the right column will always be centered.
Please note that I am still a new user so couldn't type the proper image html within the anchor but there is a html image within the anchor.
Any ideas?
Thanks
You can try some CSS like
.product_img { position:absolute; top:0; bottom:0; }
This is from memory, you may need to remove the position:absolute; from the class.
Simply add the class to the img tag and this will vertically align your image to the middle of the div.
<img srv="my_image.png" class="product_image" />