I have an <img> logo that is wrapped inside a link, and the link is wrapped in a <div>.
My code below results in the clickable area for my link to extend 100% horizontally to both edges of the viewport.
How can I make the clickable area for my link to be the size of my logo?
jsFiddle
My HTML:
<div id="logo-container">
<div id="logo">
<img src="http://placehold.it/350x150" />
</div>
</div>
My CSS:
#logo-container{
width:100%;
float:left;
height:auto;
margin:0 auto 0 auto;
background:#ECECEA;
}
#logo{
margin:0 auto;
height:auto;
}
#logo img {
display:block;
margin:6px auto 10px auto;
}
#logo img{
width:330px;
height:auto;
}
This is cause image is set to display: block;, such expands it to the full available width, pushing the A element boundaries to the extreme.
Instead, keep the logo image inline and use text-align:center; for the #logo parent: http://jsfiddle.net/wLbo6mjr/10/
#logo{
text-align:center;
}
#logo img {
margin:6px 0 10px 0;
}
Setting a width on logo fixes it
#logo{
width: 330px;
height: auto;
margin: 0 auto;
}
http://jsfiddle.net/wLbo6mjr/8/
Related
Let's say I have an image of unknown resolution. I want to center it horizontally, even if the window is narrower than the picture, and push the bottom of the window to fit the height of this picture.
How can I achieve that with css only? (no javascript)
Obviously the picture will be in an < img > tag since this is the only way to push the bottom. Align it center is easy, the hard part is to keep it centered just like a background-position:center top because when simply centering this < img > tag it will hit the left border of the window instead of overflowing hidden and staying centered.
Thanks!
If you want to do this with the img tag you can use the following two codes:
object-fit:cover;
object-position:50% 50%;
These are pretty much the same as background-size and background-position.
For example how this would be done in code:
html,body {
width: 100%;
height: 100%
}
img {
width: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
object-position: 50% 50%;
float:left;
}
div {
width: 100%;
height: 100%;
background: #222;
display:flex;
color:#fff;
align-items:center;
justify-content:center;
}
<img src="https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg" alt="Rafael De Jongh - Glitch Skull"/>
<div>
<p>Other Content</p>
</div>
You can view this as well on JSFiddle
And in case you do want to have a full fluid background image that is set to 100% of the viewports width and height, you could also do this via the following code:
html,body {
width:100%;
height:100%
}
#img {
width:100%;
height:100%;
max-width:100%;
max-height:100%;
background-image:url(https://www.rafaeldejongh.com/wp-content/uploads/2016/12/GlitchSkull1.jpg);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
float:left;
display:inline-block;
}
#content {
width:100%;
height:100%;
background: #222;
display:flex;
color:#fff;
align-items:center;
justify-content:center;
}
<div id="img"></div>
<div id="content"><p>Other Content</p></div>
Also on JSFiddle
Feel free to ask if you have any further questions!
Voila:
https://jsfiddle.net/gwja6f6z/
HTML:
<div id=main>
<div id=imgwrp>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Ingres%2C_Self-portrait.jpg" border=0>
</div>
</div>
<p>
The picture stays center and does not hit the borders of the window when window is too narrow, and this text is pushed without knowning the height of the picture.
</p>
CSS:
html, body {
width:100%;
height:100%;
text-align:center;
overflow-x:hidden;
}
#main {
position:relative;
left:50%; /* This div is just a 0px width line in middle of window */
width:0;
overflow-x:visible;
text-align:center;
}
#imgwrp {
display:inline-block; /* Image container width is same as image itself */
position:relative;
margin:0 auto 0 auto;
}
#imgwrp img {
display:block;
position:relative;
margin-left:-50%; /* The image is pushed left by 50% its container width */
}
I want to put two images in one div. One remains up and other goes down. Both take around 25% width:-
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg"/>
</div>
</div>
CSS:
.images {
float: left;
width: 25%;
}
.pics {
float: left;
width: 12%;
margin: 0%;
}
images_img {
width: 100%;
}
Try this out using display:inline-block
CSS
.images {
display: inline-block;
width: 25%;
}
.pics img{
display: inline-block;
width: 100%;
}
DEMO HERE
Do you want the pics side by side? You only need one line of css:
.pics { display:block; float:left; }
http://jsfiddle.net/ve9ud2o4/1/
Or if you want the image container div to be 25% and the pictures to span the div you could do:
.images { background:red; display:block; float:left; overflow:hidden; width:25%; }
.pics { background:green; display:block; float:left; width:50%; }
.pics img { border:1px dotted black; display:block; width:100%; }
http://jsfiddle.net/ve9ud2o4/2/
Remember that .pics width is relative to it's container. So even though the .images div is 25%, if you want a pic to be half of that you set the .pics width to 50%
you can use display:block; to prevent line breaks and display elements in same line
Of course you can ajust your div width to fit the two images and float them as you wish
I have a fluid container of 96% width.
I have a box inside this container which also has percentage width.
I can't get the box to center horizontally inside the wrapper. The usual margin:0 auto; isn't working - I guess because it has a percentage width.
<div id="wrapper">
<div class="box">
<img class="scales"... />
</div>
</div>
Here's the css:
#wrapper {
width:98%;
}
.box {
width:40%;
}
.scales {
width:100%;
}
The problem is probably that your image does not look centered as it is likely smaller than the 40% of it's containing div. In any case, there is no reason for margin:0 auto; not to work. Solution to center the image:
.box {
width:40%;
margin:0 auto;
text-align: center;
}
Try like this: DEMO
CSS:
#wrapper {
width:98%;
background-color:#999;
}
.box {
width:40%;
margin:0 auto;
display:block;
background-color:#ccc;
}
.scales {
width:100%;
}
How can I set the div #gallery in the center of the div #warp? Here is a demo JS Fiddle.
HTML:
<div id="warp">
<div id="header">
<img id="logo_l" src="images/centerwow-logo.png" alt="Centerwow - Web Design - Logo" />
<img id="Logo_r" src="images/web-design-logo.png" alt="centerwow.com - Portfolio" title="Portfolio" >
<div id="menu">
<li>About Us
<li><a href="#" name="aboutus" title="About Us" >Company Info</a></li>
<li><a href="#" name="profile" title="Profile" > Profile</a></li>
</div>
</div>
<div id="gallery"></div>
</div>
CSS:
html body{
margin:0;
padding:0;
}
body{
background:#F7F7F7;
}
#warp{
position:relative;
margin:0 auto;
}
#header {
position:relative;
background:#DEEAF4;
width:80%;
height: 100px;
margin:0 auto;
}
#logo_l{
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
#Logo_r{
position:absolute;
width:272px ;
height:100px;
right:0;
top:0;
margin:0;
padding:0;
}
#menu li {
display: block;
vertical-align: top;
float:left;
margin: 0 5px;
}
#menu {
position:relative;
width:250px;
top: 35px;
margin: 0 auto;
}
#gallery{
position:absolute;
background:#EBF0F5;
width:80%;
height:70%;
margin:10px auto;
padding:10px;
}
You do not need to include position: absolute to center #gallery. This will already be achieved with margin: 10px auto.
Further, to set a percentage height to #gallery, its parent element must have a specific height. In this case, I assume you want it to be based on viewport height. To do so, every ancestor div must have a height of 100%:
*, html, body, #warp {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/qc9WL/1/
NOTE: I also noticed that there are some bugs in your HTML and CSS.
You need a comma between body and html in line one of your style sheet
You should use <ul> or <ol> tags when making lists
Lastly, don't forget to close your <li> in line six
I'm not sure what you are trying to achieve here - position: absolute on the #gallery is exactly what's causing the problem (that's why margin: 10px auto is not working). If you remove it, the #gallery element will be in the centre.
Also, you could center horizontally an absolutely positioned element of known width by setting left: 50%; and margin-left: -40%; (-40% in this case, because you have the width for #gallery set to 80%)
Since you are specifying gallery width in percentage, why don't you try setting the left and right margin in percentage?
margin: 10px 10%;
places the division at center
I've trouble centering my webpage using the css:
CSS code below:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
position:absolute;
top:202px;
width:560px;
height:224px;
z-index:2;
}
#newsSection {
position:absolute;
left:576px;
top:209px;
width:380px;
height:600px;
z-index:2;
}
HTML:
<body>
<div id="wrapper">
<div id="welcome">
//content here
</div>
<div id="newsSection">
//content here
</div>
</div>
</body>
I can center the webpage except for the #newsSection div.
The reason why I put "left:576px" under #newsSection div is because I want it to place it right next to the #welcome div.(side by side) However, when I shrink my browser size, #newsSection div will move to the left a bit and overlap #welcome div.
If I remove "left:57px", then the #newsSection div will appear right on top of #welcome div...
Please help.
Thanks
This is probably because youre using absolute position on the child divs. Therefore, "the kids will run wild", as in, they don't care that the parent div#wrapper is center.
Some potential code:
#wrapper {
margin-left:auto;
margin-right:auto;
width: 100px;
}
#welcome {
float: left;
width:560px;
height:224px;
}
#newsSection {
float: left;
width:380px;
height:600px;
}
you should use relative positioning, ie, tagname.class {position:relative; top/right:? ;}
To center a webpage you can use this:
.container{
width: 100%;
max-width:80%;
margin: 0 auto;
}