On this website: http://www.bestcastleintown.co.uk/pg/
I am trying to get the coloured area of each <div class="awards_square_home"> to be a click-able link by nesting an <a> tag inside the <div> and adding padding. However I am already using padding on the <div> to position the <a>. With the padding in this rule:
.awards_square_home {
border: 10px solid rgb(195, 195, 195);
height: 90px;
margin-bottom: 20px;
padding: 90px 20px 20px;
}
Now when I add padding to the element it is not spreading the padding in the way that I desire, which is to to make the entire coloured area of the div click-able.
.awards_square_home a {
padding: 120px 0 20px;
}
I am trying to make the from the <a> fill this area of the <div>:
If I did not misunderstand you, you want your div all to be clickable rather than the text only.
<a href="#" class="text220 centertext capitalise_text home_feature_turqoise NG">
<div class="awards_square_home turqoise podium">
<span>Best</span>
<span>University</span>
<span>Campaign</span>
</div>
</a>
Fiddle here
I believe I have fixed the issue by amending the the CSS as follows:
.awards_square_home {
border: 10px solid #c3c3c3;
height: 200px;
margin-bottom: 20px;
}
.awards_square_home a {
display:block;
padding: 90px 0px 20px 0px;
}
Instead of setting background / padding / height on the parent <div>, you can just set the <a> element to behave like a div and set them there instead:
a {
display: block;
background-image: url("../images/icons/globe_v3.gif");
background-repeat: no-repeat;
background-position: 50% 15%;
padding: 95px 20px 20px 20px;
height: 90px;
}
Don't forget to remove these properties from where they currently exist.
and why you can't add <div> into <a> tag?
a {
display: block;
}
and add your content into <a> tag.
Or remove padding from div and set padding only for <a> tag.
if you want the a to fill the div,why do you use padding on the div,and margin on tha a, which the sole purpose is to prevent the a from filling the div?
delete the padding on the a,it should work
Related
I've been experimenting with display:inline-block on div elements and I'm trying to work out why my two inner div elements are not displaying on the same line. Both divs are set to width of 200px and their parent div is set to 400px.
If I set the inner divs to float left instead of using inner-block it works as expected.
The code snippet is as below:
Note: that I've set box-sizing to border-box. So I assumed this would make both inner divs exactly 200px even with the 1px border.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>
You could remove the white space between inline-block elements by adding font-size:0px; to parent element (.container) then add font-size (e.g 16px) to child (.inner) elements.
* {
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0
}
.container {
width: 400px;
font-size:0px;
}
.inner {
border: 1px solid black;
padding: 10px 0;
width: 200px;
display: inline-block;
font-size: 16px;
}
<h1>Why does this display on two lines?</h1>
<div class="container">
<div class="inner">Testing border box property</div>
<div class="inner">Second div</div>
</div>
You need to remove unnecessary spaces between your HTML tags or reset font-size to 0.
check it here :
Fighting the Space Between Inline Block Elements
There is more solutions on the link above.
Plus you can use display:block; float:left instead.
The border. The border will add 2 pixels to each box, so the contents are actually 404 pixels, and it does not fit within the 400 pixels wide div.
There's not enough space in the container div. Change the container div to 404px to account for the left and right sides for each of the inner divs
I am trying to center an anchor horizontally AND vertically inside a list.
#menu li a {
display: inline-block;
width: 100%;
height: 40px;
padding: 12px 0 12px 0;
text-decoration: none;
color: #AAAAAA;
font-size: 40px;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
http://jsfiddle.net/9FEDC/2/
All I want is an anchor that:
is horizontally and vertically centered
stretches accross the entire parent
EDIT: text-align is working fine but not even vertical-align: middle is working.
EDIT 2: As suggested, I'm now using a line-height equal to the anchor's height. This does indeed get the anchor closer to its vertical center, but for some reason it is still a few pixels off its true vertical center. Here's an updated fiddle...
http://jsfiddle.net/zp5GM/1/
EDIT 3: just out of curiosity I defined a 1px solid border for the anchor element and saw that the text INSIDE the anchor itself is not centered vertically. So things like vertical-align or even position changes to the anchor do not affect anything in this regard.
Can somebody please explain this weird behavior?
As has been mentioned, your markup is invalid. Once that is fixed, you can center the anchor tag by doing something similar to this:
Set the width and text alignment to the anchor's parent instead of the anchor itself.
li {
text-align: center;
width: 100%;
}
To vertically align and element, you can take different approaches. The easiest is probably to give the element the same height and line-height. That way it will vertically center the text.
<div class="parent-element">
<div class="child-element">
<p>This is some text.</p>
</div>
</div>
.parent-element {
width: 100%;
}
.child-element {
height: 100px;
line-height: 100px;
}
You can also position it 50% from the top and then subtract half the height of the child element.
<div class="parent-element">
<div class="child-element">
<p>This is some text.</p>
</div>
</div>
.parent-element { position: relative; }
.child-element {
height: 100px;
margin-top: -50px;
position: absolute;
top: 50%;
}
text-align:center;
That should do it.
I have moved an image from inside a div to being the background of the div so that using different CSS files I can show different images. The problem I'm running into is that simply by adding an anchor around the div, the format is being thrown off.
Here is what I had:
<div class="logoWrap">
<a href="\">
<img src="#Html.SvccCdnPreAppend("/Images/silicon-valley-code-camp.png")" class="border-None"></a>
</div>
#header .logoInfoBar .logoWrap {
padding: 6px 10px 0;
text-align: center;
}
Here is what I tried changing it to. If I don't add the anchor, then the format is correct. I don't understand how adding an anchor tag can affect formatting.
<div class="logoWrap"></div>
#header .logoInfoBar .logoWrap {
background-image: url(/Images/silicon-valley-code-camp.png);
width: 350px;
height: 57px;
background-repeat: no-repeat;*/
padding: 6px 10px 0;
text-align: center;
}
And what happens when you try something like
?
At the moment I have a layout that pulls a number of thumbnails into a grid - each is defined by a style that keeps them a fixed ratio, (roughly 16:9) which is defined by pixel dimensions (389px x 230px) but they are looking a bit small on high-res screens.
The images are actually pulled into the DIV as a background that covers 100% width and height of the DIV and then the DIV's obviously control the aspect and size.
What I am looking to do is have these DIV's dynamically resize based on the page size of the device but to keep the ratio of the DIV's.
Is this possible?
My thoughts would be to set the width based on the percentage of the page but then I'm not sure how I would set the height and keep the correct aspect ratio (due to different resolutions etc.)
What would be the best way to do this?
EDIT - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment.
In my HTML I've got the following code which generated the grid
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
This is styled with the following CSS
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
The reason I'm implementing it this way is so that the Div can float over the bottom of the image.
Just a quick idea which might be useful for you.
It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
http://jsfiddle.net/xExuQ/2/
body,html { height:100%; }
.fixed-ratio-resize {
width: 50%; /* child width = parent width * percent */
padding-bottom: 50%; /* child height = parent width * percent */
height: 0; /* well, it is not perfect :) */
}
If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
Reference:
http://www.w3.org/TR/CSS2/box.html#margin-properties and
http://www.w3.org/TR/CSS2/box.html#padding-properties says:
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
EDIT
http://jsfiddle.net/mszBF/6/
HTML:
<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
<span class="titles">
<span class="name">Unicomp Studios</span>
<span class="title">Springs Buckling (2012)</span>
</span>
</a>
CSS:
.griditem {
float: left;
margin-right: 17px;
margin-bottom: 17px;
min-width: 100px; /* extremely narrow blocks ==> crap looking */
width: 30%;
background: blue no-repeat;
background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
/* <a> elements must only have inline elements like img, span.
divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
display: block; /* so display those inline elements as blocks */
padding: 5px;
margin: 0 auto;
margin-top: 105%;
background: yellow;
}
.titles > span {
display: block;
}
I know this might not be the best solution, but
<html>
<style type="text/css">
#cool{
width:40%;
background:blue;
padding-bottom:10%;
}
</style>
<div id="cool" >
</div>
</html>
Here Ive used padding-bottom, to maintain its height relative to its width. U can set padding-bottom as a percentage. Hope this helped.
I've set two span elements side by side with a separating border being applied to one of the spans. The problem occurs when one span has more lines than the other. If the span with less content is the one which has the border applied to it, the border doesn't stretch to the bottom of the container.
I've tried adding height and min-height elements to the span, the containing div, the HTML and body tags in various combinations with no success.
Here is the sample HTML:
<div class="newspecs">
<div class="ns_row_type_2">
<span class="ns_field_name">Flash Exposure Compensation</span>
<span class="ns_field_value">+/- EV<br>more text<br>more text<br>more text<br>more text</span>
</div>
</div>
And the applicable CSS:
.newspecs div {
display: block;
clear: both;
}
.newspecs span {
display: inline-block;
vertical-align: top;
}
.ns_row_type_1,
.ns_row_type_2 {
border-bottom: 1px solid #fff;
}
.ns_row_type_1 {
background-color: #ccc;
}
.ns_field_name {
width: 100px;
padding: 3px;
border-right: 1px solid #fff;
}
.ns_field_value {
width: 280px;
padding: 3px;
}
The full CSS and HTML is at:
http://yazminmedia.com/clients/IR/test.htm
Anyone have an idea of what is going on?
Thanks!
Option 1: Floats, extra border, and 1px negative margin
http://jsfiddle.net/95uMq/
Option 2: CSS3
http://jsfiddle.net/95uMq/1/
Option 3: Table based Layout
http://jsfiddle.net/95uMq/2/
You should really be using a HTML TABLE here as this is a table of data that you are trying to display.
However as a nasty hack, change ns_field_value to...
.ns_field_value {width: 280px; padding: 3px; margin-left:-4px; border-left:1px solid #fff}
This just adds a border-left to the field value 'cell' and then does a -4px margin so that the borders overlap appearing to create a single border.