Reducing link clickable width - html

I have a link on my website and I dont like the way it is clickable along the whole width of the page.
I have tried putting blank divs with width attributes on either side of the link and tried putting a width attribute in the link itself. I also tried the overflow attribute recommended in another answer.
Does anyone have any suggestions? Here is the code:
<div align= 'center'>
<p style="font-size: 15px;">text</p>
</div>

p stands for a paragraph, which is a block level element. These use the full width available to them by default. Your case looks like you want a span instead, which is an inline element, like the link itself, that only spans the contained text.
<div align= "center">
<span style="font-size: 15px;">text</span>
</div>
Alternatively, you could skip the tag completely by applying the style directly to the link instead.
<div align= "center">
text
</div>

change your code to this:
<div align= 'center'>
<p style="font-size: 15px;">text</p>
</div>

Related

Get paragraph on same line as header in CSS

I have the following HTML and CSS code which I've taken from a WordPress theme.
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:</h2>
<p style="text-align: center;">(098) 765-4321</p>
</div>
</div>
On a webpage it presents as follows
Phone:
(098) 765-4321
How can I write my CSS to make the elements fit into one row, like this:
Phone: (098) 765-4321
Apply display: inline-block to the <h2> and <p> elements, as they are both block elements, so they are taking up the whole width, causing the line break.
Alternatively, you could apply float: left to both of them.

css vertical whitespace when adding link between divs

Problem I've never run into. Searched without resolution but might not know the right search terms to use. So if already answered I beg pardon.
I had this html. (Kinda long so simplified)
<div class="movieabovewrap">
<div class="movieabove">
LINK TEXT
</div>
And I wanted the link to cover all of the movieabove div so I moved the link outside of it as in.....
<div class="movieabovewrap">
<a href="LINK">
<div class="movieabove">
LINK TEXT
</div>
</a>
(it seems to be cutting off the last end div on both)
Anyways when I moved the link outside the div all the sudden I get this vertical whitespace of about 10px above and below the divs which I assume is attached somehow to the a href element. Assuming as I can't get anything to show up when I inspect the elements. Is there someway to remove this vertical whitespace with css? It kinda trashes my design. :( Any help would be mucho appreciated.
Short answer: Using <span> instead of <div> inside <a> should do the trick for you.
Explanation: The a tag renders a text element, if you want it's children to also act as text elements they must have display: inline.
div elements have display: block by default.
span elements have display: inline by default.
Add display: block to the link, either inline or via css:
<div class="movieabovewrap">
<a href="LINK" style="display: inline-block;">
<div class="movieabove">
LINK TEXT
</div>
</a>
</div
or
.movieabovewrap > a {
display: inline-block;
}

Positioning of multiple elements with canvas pictures

I've got a question about positioning of multiple elements with a text right of a "picture". The situation itself is explained below. My question here is how can I best go about positioning the elements. I've tried around a bit with relative positioning, fixated and absolute, but didn't find a good functioning variant. Thus the question is if someone could give me an advice on how to best go about the positioning itself there (what should be put into relative,....)
Situation:
Every "part" consists of a <div></div> with multiple elements in it. Each of these div's includes a heading text, then a picture part and right of the picture some text.
The parts themselves are situated in a <div id="content"> themselves (thus all parts are children of this main div, which is centered horizontally on the screen and situated below the mainmenu (relative)).
The picture part is a div which contains 2 canvases which are displayed at the same position so that a transition effect can be made on mouseover.
The number of "parts" is known and also the elements of which the div consists of don't change.
Detailed picture
Example sourcecode
<div id="content" width="800px">
<div id="part1">
<span class="highlight">Headling</span>
<div id="part1image" class="floatleft">
<canvas height="100" width="100" id="part1image1"></canvas>
<canvas height="100" width="100" id="part1image2"></canvas>
</div>
<span class="text2">Text</span>
</div>
<div id="part2">
<span class="highlight">Headling</span>
<div id="part2image" class="floatleft">
<canvas height="100" width="100" id="part2image1"></canvas>
<canvas height="100" width="100" id="part2image2"></canvas>
</div>
<span class="text2">Text<br/> Text line 2</span>
</div>
</div>
This (link) is the closest I can come. I had to add an extra wrapping <div>, to make sure the headings did not become inline.
A summary of the code:
The elements are inline-block, to make sure they are in line
The .floatleft class has relative positioning, so that the canvases can stack. It also has a fixed width and height because there are no elements in the div that are positioned normally.

How do I make entire div a link? [duplicate]

This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.
Thanks!!
You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.
<a style="display:block" href="http://justinbieber.com">
<div class="xyz">My div contents</div>
</a>
Using
<div class="xyz"></div>
works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.
When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.
It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like
.xyz:before { content: "Hello world"; }
The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?
Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.
<a href="http://www.example.com" style="display:block;">
<div>
content
</div>
</a>
<a href="http://www.example.com">
<div style="display:inline-block;">
content
</div>
</a>
<a href="http://www.example.com">
<span>
content
</span >
</a>
<a href="http://www.example.com">
content
</a>
But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:
document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');
but I would recommend against that.
the html:
<a class="xyz">your content</a>
the css:
.xyz{
display: block;
}
This will make the anchor be a block level element like a div.

How to set the div must in the bottom using CSS?

This is the div for my product, you can see the demo like this:
<div class="productItem">
<div>
<!--image -->
</div>
<div>
<!--text -->
</div>
</div>
http://www.4freeimagehost.com/show.php?i=4aba7e2005a0.jpg
Each product has a product image and product text. The image is on the top, and the text is under each image. But you can see that, image can have different size, so I don't want the text always in the bottom instead of just below the image. How can I layout the text must in the bottom, except from assigning the absolute position.
It might be worth considering making your images a standard size. Perhaps a large and a smaller size? You could always have an option to show a larger image when someone clicks on the smaller one?
You could also simplify your HTML using something like this:
<div class="productItem">
<img class="large" />
<p>Text</p>
</div>
This would let you change the CSS depending upon the image (by giving it a class), and reduce unnecessary div's.
Perhaps force the image to display above the text using the block attribute?
img {display:block;}
I must be missing something because this seems fairly simple.
<style type="text/css">
.productItem {
text-align: center;
}
<div class="productItem">
<img src="whatever"><br style="clear: both;" />
Text
</div>
Perhaps there's more that I'm not understanding.
From your screenshot, it looks like your text is always below the image, but in the right half of your screenshot, when a small image is in the same row as a larger image, the text isn't lining up (the product descriptions aren't at the bottom of the cell). Is that what you're asking about? How to get the text all aligned to the bottom of the row when the image size varies?
You could set the table row that's containing all the products to be <tr valign="bottom">, which will push everything to the bottom, stacking the images on top of the text. This would mean that the small images would all have their bottoms aligned with each other, not their tops. If you want the images to stay up, but the text to go down, instead style the image DIV like this: <div style="height:200px; width:200px; overflow:hidden; text-align:center;">. This will create a larger placeholder for smaller images such that the text beneath them all lines up, and if an image is too big, it will get cropped rather than stretch out and cause the text to get all out of line.
i assume you have a container for productItem
so it should be something like that:
<div class="productList">
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
<div class="productItem">
<div>
<!--image -->
</div>
<div class="productText">
<!--text -->
</div>
</div>
</div>
i don't know why you dont want to use absolute positioning but that's only solution in this case (without giving fixed height to image or divs).
This setting would not hurt anything and will work on all common modern browsers including ie6.
All you need to do is give a different classname for product text or use different tag for addressing it.
css:
.productsList {background:#f00; overflow:hidden;height:1%;position:relative;}
.productItem {float:left;background:#ff0;}
.productText {bottom:0;position:absolute;text-align}
try this. should work perfectly
other solution is written above by MidnightLightining. using fixed height for image container.