Hello I'm new to html & css and I have a question. I'm using the following code to set some images with text above and under it as you can see here:
http://jsfiddle.net/thespacebean/xGqDE/
But now i'm trying to re-use that code in another box but the text isn't where it needs to be. here a use another type of box:
css:
#content{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
}
html:
<div id="content">
<h2>Kleding</h2>
<div id="navbanner">
<div id="nav2">
<ul>
<li>Baby</li>
<li>Peuter</li>
<li>Kleuter</li>
</ul>
</div>
</div>
<div id="img">
<img src="../images/winkelwagen.jpg">
</div>
<h3>Baby</h3>
<div class="section">
Pika deken
<img src="../images/baby1.jpg" />
€20
</div>
<div class="section">
School outfit
<img src="../images/boy1.jpg" />
€140
</div>
<div class="section">
Bussines girl
<img src="../images/girl2.jpg" />
€250
</div>
<div class="section">
Summer
<img src="../images/girl1.jpg" />
€99.99
</div>
</div>
And thats why everything is floating left. Can someone get my images and the text under and above centerd without moving the navbar and Baby title? Thanks in advance !
the fiddle example has
text-align: center;
in the CSS put you don't appear to have this in your CSS so the text will be on the left;
Related
This is driving me nuts. I'm probably overlooking something super simple since I normally don't have issues with something like a psuedo-class.
I'm trying to remove the right border on a div element for the last-child. I can have it work with a class on the last element, but I don't need to do it that way (since the content will be in an ee loop).
Here is the code. Everything is wrapped in a section with an id of #small-featured. All the content that is nested in bootstrap columns is wrapped in a #featured-wrapper.
<section id="small-featured">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-6022.png" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-5100.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/46-455.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/unisaw.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
</div>
</div>
</section>
Here is CSS
#small-featured {
text-align: center;
}
#small-featured img {
width: 250px;
padding: 0 15px;
}
.featured-wrapper {
border-right: 1px solid #eee;
}
#small-featured .featured-wrapper:last-child {
border-right: none;
}
All the borders disappear when I add my last bit of CSS. I've tried targeting just .featured-wrapper:last-child as well.
Any ideas?
#small-featured .col-md-3:last-child .featured-wrapper {
border-right: none;
}
(All .featured-wrapper are :last-child.) ¯\_(ツ)_/¯
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;
I am working on a project where we are using blocks which contains text. The blocks have a header image. The result should be something like the picture below.
The problem I am facing is that the image is set using the CSS background-url propertly, which makes the image go beneath the text instead of being displayed as a header image. I am using the code below, for the purpose of this question in the style of the picture above:
.block {
background-color: #fff;
border-radius: 5px;
padding: 20px 40px 20px 40px;
margin: 10px 10px 10px 10px;
}
.header {
background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
background-size: contain;
height: 300px;
}
This creates the <div> that I need, however as you can see on the picture below, it does not give me the result I want.
I have tried setting the .header to display: block, but this did not change anything. I have also tried using margin to force the text to be displayed under the image, which did not work either. Can someone help me to get the result I want?
The relevant HTML is down below.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
Change your html to below:
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header">
</div>
<div class="block">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
You have put block and header in the same div, so your background-color in .block class is overriden by background of .header class.
Here is fiddle.
If you really want to use a background image, consider using % padding. That also helps the layout stay responsive. Also, cover forces the background image to cover the entire div, so you don't want that at all.
.block {
background-color: #fff;
border-radius: 5px;
padding: 20px 40px 20px 40px;
margin: 10px 10px 10px 10px;
}
.header {
background: url('https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png');
background-size: 100% auto;
background-repeat: no-repeat;
padding-top: 32%;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
I keep my original suggestion of using an <img> instead of a background image. It is both easier to implement and more correct semantically.
I've tried to simulate the result in your image below:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row content">
<img class="header_img" src="https://www.facebook.com/rsrc.php/v2/yq/r/ZAmUp1oGGPN.png" />
<div class="col-md-12">
<div class="block header">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.6</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.header_img{
width: 100%;
height: auto;
}
.content{
background-color: white;
border-radius: 5px;
margin-top: 20px;
overflow: hidden;
}
Demo: http://jsfiddle.net/bh7Lh42k/1/
This is probably a pretty basic question, but I have a banner with an image on the left and text on the right. Under the banner is just a block of color. When the page gets smaller, my expectation is that the bits in the banner would stack (maintaining the background color for both) and the block of color (class="blue-line") would fall beneath them.
Here is the mark-up:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
</section>
and the css
.header {
background-color: #F2EBCC;
border: 10px solid #F2EBCC;
height: 120px;
}
.row > .title {
text-align: right;
top: 45%;
}
Thanks in advance!
JSFiddle: http://jsfiddle.net/3n6Kd/
try this:
<section>
<div class="row header">
<div class="col-sm-6">
<img src="../images/logo.png" height="100px" />
</div>
<div class="col-sm-6 title">
<h2>Some Title Text</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 blue-line"></div>
</div>
and:
.header {
background-color: #F2EBCC;
height: 120px;
}
.title {
text-align: right;
display: block;
padding: 10px;
}
.blue-line {
margin-top:10px;
height: 15px;
background-color: blue;
}
the text go under the first column not the blue-line, but it seems to appear above the blue-line so try it in your computer because some time jsfiddle.net don't show code correctly.
hope it will help you.
I'm trying to create a 2 column layout with an image to the left and text to the right in wordpress. This needs to be a max of 600px width, the images will all be a fixed size of 250px wide and 142px high, and I will have image/text repeated below, as in this site http://housemusicpodcasts.co.uk/latest-podcasts/
All my attempts have led to the text just appearing below the images. I'd like to just be able to html/css without the need to change core files.
EDIT: Ok I have this code, but it does not align correctly, any ideas what I need to change?
<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>
</div>
<p>TEXT HERE</p>
<p style="text-align:right;">Read More....</p>
</div>
</div>
<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="TEST" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>
</div>
<p style="text-align: left;">TEXT HERE</p>
<p style="text-align: right;">Read More....</p>
</div>
</div>
CSS
.pod p {
margin: 0px;
padding: 0px;
float: left;
clear: right;
}
.singleblock {
float:left;
clear:left;
margin-bottom: 10px;
}
Any guidance will be much appreciated.
Gary
for each couple of image/text, put them in a div. put a class on this div, and on use this CSS
.yourdive img{
float : left;
}