Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I need to be able to center text in the caption with a link added on the far-right of the caption. Please indicate if/how this can be done.
The caption would be formatted as follows:
Centered Text Right-justified link
CSS:
.caption {
text-align: center;
}
.caption a {
float: right;
}
Markup:
<div class="caption">
[Centered Caption]
[Right-justified Link]
</div>
DEMO
Another DEMO, with caption centered on parent width, as opposed to available space
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have an image like this
I want to put small clickable boxes on it, like this
Does anybody have any idea how to do this using HTML/CSS?
Edit: Thanks to #BCollingwood, his answer with boxes property as absolute worked like a charm.
You can add all images to a container div then position them relative to each other using CSS:
HTML
<div class="container">
<img class="image_1" /> // the background
<img class="image_2" /> // the clickable square
</div>
CSS
.container {
position: relative;
}
.image_2 {
position: absolute;
left: 50px;
top: 50px;
}
you have to use svg. it is not wise to use anything other than svg to make certain part of image clickable.
[https://www.w3schools.com/graphics/svg_intro.asp]
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This site: http://www.samuelgrant.co.uk
This is exactly the kind of setup I want to build. I'm stuck, however, at figuring out how the maximum width of this site is being set. I want a centered main content area like this site has with the background stretching to full browser width. Can anyone enlighten me? Relative newbie here...any help would be appreciated. Thanks!
HTML
<div class="container">
<div class="inner-w">
Stuff in your inner column
</div>
</div>
CSS
body {
margin: 0;
}
.container {
background-color: #f06;
}
.container .inner-w {
max-width: 50em; /* or 400px etc */
margin-right: auto;
margin-left: auto;
}
a jsFiddle that also shows this column width - and how it can be different in each sections etc.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I want that the blue box at link is displayed the full width of the white area, the content...
code:
.info {
background-color: #3498db;
padding: 10px;
color: #fff;
font-weight: bold;
position: absolute;
z-index: 10;
}
thank you for your help...
You can set the width of 100%, this should be the full width of the content area...
Try this JQuery code:
var s=$('#content').width();
document.getElementById('home').style.width=s;
By using Inspect Element i found that #content is your parent(white background) div and #home is your div you want to adjust the width to the width of #container.
If its info class write:
var s=$('#content').width();
$('.info').css({'width':''+s+'px'});
If you want the blue content on 100% of #content, you should remove the padding on #content.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a html page wherein Image and Text come adjacent to each other, as shown in the markup below:
<div><img src="image1.png"/><p>First Image</p></div>
<div><img src="image1.png"/><p>First Image</p></div>
I want the Image and text align side by side under every DIV and all divs to be listed in the page.
Please help me how to achieve this with CSS, without using tables.
I would use display: inline-block
img {
width: 100px;
display: inline-block;
}
p {
display: inline-block;
}
DEMO jsFiddle
If i am understanding you right, you wan't your text to be inline with your image. well if that's the case then the reason this doesn't happen already is becuase a paragraph <p> element is a block element so it would be the whole width of its containing parent. If you wan't to display it inline use display inline on your <p> tag like this
div p{ /* Change this according to your selectors. */
display: inline;
}
div{
overflow:hidden;
display:inline;
}
div img{
display:inline-block;
}
div p{
display:inline-block;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am trying to create a web page that looks like like in this site:
I tried creating an image with that design(the one in the middle with a white background and pointy edges on the top and bottom) but the result is that the image is static and does not dynamically change when the content of the page changes.
I do not know if I can implement the design by customizing the <div> borders or upload the design as a background image then dynamically create it.
Thanks for all the help.
If you don't want to use CSS3 (for more browser support) use the following structure:
<div class="conatiner">
<div class="pointyHeader"></div>
<div class="content">
your dynamic content here
</div>
<div class="pointyFooter"></div>
</div>
where pointyHeader and pointyFooter have a fixed height and background image.
Working jsFiddle
I thought of a .box { position: relative; }
and a .top { position: absolute; top: 0; } and same with bottom .bottom { position: absolute; bottom: 0;}
check it here: http://jsfiddle.net/DyG8F/