I looked around the boards a bit and couldn't find anything that worked for me, but basically when I center an image that has an anchor tag wrapped around it, the linkable area fills out to fit the entire width of the div, even when specifying a width. How can I get the link to only be around the image?
Link to JS Fiddle http://jsfiddle.net/jJ4hv/
HTML
<div id="right">
<div id="content">
<div class="title">
<h3>Spawn</h3>
<p><< Go Back</p>
</div>
<img src="images/spawnThumb.png" />
<p class="description">Spawn</p>
</div><!-- END content -->
</div><!-- END right -->
CSS
#content img {
display: block;
margin: 0 auto;
width: 400px;
}
.title {
border-bottom: thin solid #316b9c;
margin-bottom: 20px;
}
.title a {
font-size: 12px;
color: #bcbdbf;
}
.title a:hover {
color: #316b9c;
}
.title a:active {
color: #000;
}
.topImage {
margin-bottom: 10px;
}
p {
color: #bcbdbf;
}
Just add #content a to the #content img CSS.
#content img,
#content a{
display: block;
margin: 0 auto;
width: 400px;
}
http://jsfiddle.net/jJ4hv/2/
You could possibly apply
display: table;
margin: auto
to the [a] tag surrounding the image.
I fixed the same issue by adding text-align: center to the a tag!
#content a {
text-align: center;
}
Related
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
I am trying to code a website using CSS. My header looks like this below. It is consisted of two child divs - logo and topright. Whenever I minimize the width of the screen, topright gets shunted downwards onto the next row. The two divs are floated left and right respectively, and should share the same row. However, I do not want topright to be shunted to the next row. How can I fix this?
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="topright">
<div id="phone">
<p>here</p>
<h6>Learn about out services</h6> </div>
<div id="ssl">
<img src="images/ssl.png" width="150" height="39" align="right" />
</div>
</div>
My css code is
#header {
width: 100%;
position:relative;
clear:both;
}
#logo {
float: left;
margin-top: 20px;
display: block;
}
#logo h1 {
text-indent: -2000px;
background:url(images/logo.png) no-repeat;
display:block;
}
#logo h1 a {
display:block;
width: 381px;
height: 97px;
}
#topright {
float: right;
margin-top: 20px;
display: block;
}
#phone {
float: left;
background:url(images/phone.png) no-repeat right;
height: 70px;
padding-top: 40px;
padding-right: 60px;
text-align:right;
}
#phone p {
font-weight:bold;
font-size: 1.4em;
}
#phone h6 {
font-weight:bold;
font-size: 0.8em;
color:#6F694F;
}
#ssl {
float: right;
margin-top: 40px;
margin-left: 20px;
}
Put min-width: 1000px into logo's css. This ensures that there is always 1000px, however hidden, that the topright div can fit inside even if it is off the screen.
I have a div message which basically has a text and a link. I want its size to be changing based on the string inside it. Also I want this message div to be centered inside its container.
I have been playing with it for a while without much luck. Here is the link to JSfiddle: http://jsfiddle.net/pDYJ8/
Also I don't know how make that text and link appear one after other ( not on the new line )
Here is the code:
<div class="container">
<div class="message">
<p>do you want to </p>
<a href="somewhere" target="_blank">
buy this product
</a>
</div>
</div>
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
}
.message {
margin-right: auto;
margin-left: auto;
background: #ddd;
width:100px;
}
Tried display inline block to fit its content but then it wouldn't center it inside its parent.
Keeping width 100px for now just to mock my requirements
Just Tweak Some CSS
See the demo fiddle.
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
text-align: center; /*added*/
}
.container .message {
display: inline-block; /*added*/
text-align: left; /*added*/
background: #ddd;
}
.message p { /*added*/
display: inline-block;
}
Explanation
The text-align center causes the now inline-block display of .message to center, which is then reset to have its own text-align back at left (this is not necessary). To get the a on the same line, the p also needs to be some type of inline display, here I chose inline-block as well..
I think you are over complicating things. All you need is a text-align: centeron the container and a display: inline-block on the message:
.container {
background: #666;
font-size: 15px;
color: #e47911;
text-align: center;
}
.container .message {
background: #ddd;
display: inline-block;
}
http://jsfiddle.net/Pevara/pDYJ8/9/
The inline block makes the div act as a word inside text, and the text-align center makes the 'word' align to the center...
Here is a simplified approach to a couple of the answers given. It reduces the amount of HTML and CSS needed.
CSS
.container {
color: #e47911;
text-align: center;
}
.message {
display: inline;
background: #DDDDDD;
}
HTML
<div class="container">
<p class="message">
Do you want to buy this product?
</p>
</div>
I would definitely put your anchor tag, <a> inside the paragraph tag, <p>.
You could even remove display: inline; from .message if you made it a <span> rather than a <p>.
Check this out:
http://jsfiddle.net/pDYJ8/10/
Changes made to above link
.container .message {
margin: 0 auto;
width:auto;
}
span{
background: #ddd;
display:inline;
}
You can simplify it with display: table; and margin: 0 auto;
.container {
display: table;
margin: 0 auto;
background-color: #DDD;
}
<div class="container">
do you want to buy this product
</div>
I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.
I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.
HTML
<body>
<div id="wrapper">
<div id="header"><img src="images/logo.png" width="360" height="127" /> </div><!--header-->
<div id="menu">
<ul><li>Home</li>
<li>About</li>
<li>Network</li>
<li>Help</li>
<li>Contact</li></ul>
</div><!--mrnu-->
<div id="content">
<div id="sidebar">
Sidebar
</div><!--sidebar-->
<div id="main">
<iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&num=1&ie=UTF8&t=m&z=6&ll=51.206883,7.756348&output=embed"></iframe>
</div><!--main-->
<div class="clear"></div>
</div><!--content-->
<div class="push"></div><!--push-->
<div id="footer" class="footer">
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>
CSS
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-size: 75.00%;
color: #fff;
background: url(images/bg.png);
}
a{
color: #090;
text-decoration:none;
}
a:focus, a:hover, a:active {
color: #FFF;
text-decoration: underline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
margin: 0;
}
html, body {
height: 100%;
}
/* div tags */
#wrapper {
width: auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#header {
position: relative;
width: auto;
height: auto;
background-color: #090;
}
#menu {
width: auto;
height: auto;
border: 2px solid #000;
font-size: 18px;
}
#menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
#menu li {
display: inline;
padding: 50px;
}
#content {
width: auto;
height: 100%;
}
#main {
width: auto;
margin-right: 125px;
}
#map {
width: 100%;
height: auto;
}
#sidebar {
width: 125px;
height: auto;
float: right;
text-align: center;
background-color: #FC0;
}
#footer {
width: auto;
height: 125px;
background-color:#CC0;
}
/* classes */
.clear {
clear: both;
}
.footer .push {
height:125px;
}
Note: There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.
I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.
It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.
Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D
Try these style changes-:
#map {
width: 100%;
// height: auto;
}
#content {
width: auto;
//height: 100%;
height: auto;
}
Setting #content to height:auto pushes the #footer div to meet the #content div.
and in <iframe> set height to 100% (or 80% to show footer). It still leaves the issue of the map div now pushing the footer to below screen height. To deal with that, possibly set an absolute height for the iframe, or use an alternative to iframe.
I am trying to align a element center in a div where i am not giving any width to parent div becouse it will spread according to screen size , there is total 3 element in div :
Buttons
Heading
Logo
buttons will always align left and logo will align right whenever screen size will be change and the heading will always align center like this
My code is here
http://jsfiddle.net/7AE7J/1/
please let me know where i am going wrong and what css i should apply for getting the element (heading) align center always.
HTML
<div id="header">
<div id="buttons">
link 1
link 2
</div>
<h1>Heading of the page</h1>
<div id="logo">
<a href="#">
<img src="http://lorempixum.com/60/60" width="178" height="31" alt="logo" />
</a>
</div>
</div>
CSS
#header {
background:green;
height:44px;
width:100% }
#buttons {
float: left;
margin-top: 7px;
}
#buttons a {
display: block;
font-size: 13px;
font-weight: bold;
height: 30px;
text-decoration: none;
color:blue;
float:left}
#buttons a.button_back {
margin-left: 8px;
padding-left:10px;
padding-top: 8px;
padding-right:15px }
#header h1 {
color: #EEEEEE;
font-size: 21px;
padding-top: 9px ;
margin:0 auto}
#logo {
float: right;
padding-top: 9px;
}
You can use inline-block for this:
#header {
text-align: center;
}
#header h1 {
display: inline-block;
}
How about this:
#header {
position: relative;
text-align: center;
}
#header h1 {
display: inline;
}
#header #buttons {
position: absolute;
left: 0;
top: 0;
}
#header #logo {
position: absolute;
right: 0;
top: 0;
}
display: inline is actually a bit more cross-browser than display: inline-block;
Try
.centered {
margin: 0 auto;
}