I am often using div to box in information but I have notice that the wrapping box might sometimes not fill out the space and this leads to elements from other wrappers entering the box area.
For example :
<div>
<div style="length:150px;">my info1</div>
<div style="length:50px;">my Info2</div>
</div>
Take a look at this example
.topic {
width: 500px;
background-color: green;
display: block;
}
.topic .tInfo {
float: left;
width: 460px;
background-color: blue;
}
.topic .tName {
width: 460px;
background-color: brown;
}
.topic .tTime {
width: 460px;
background-color: lime;
}
.topic .tUImgLnk {
width: 40px;
height: 40px;
float: left;
position: relative;
background: red;
}
.topic .tUImgLnk .tUImg {
margin: 0px auto;
display: block;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
}
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
I have used <br style="clear:both"/> at the end of each wrapper box but is this really the best way to go?
This is happenning because you don't have a wrapper , and the elements are liberaly floating;
in the below snippet I wrapped your elements in rows with article selector and cleared floats:
.topic {
width: 500px;
background-color: green;
display: block;
}
.topic .tInfo {
float: left;
width: 460px;
background-color: blue;
}
.topic .tName {
width: 460px;
background-color: brown;
}
.topic .tTime {
width: 460px;
background-color: lime;
}
.topic .tUImgLnk {
width: 40px;
height: 40px;
float: left;
position: relative;
background: red;
}
.topic .tUImgLnk .tUImg {
margin: 0px auto;
display: block;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
}
article:after {
content: "";
display: table;
clear: both;
}
<article>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
<article>
</article>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
</article>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to align multiple inline-blocks at the top of my page, but for reasons that are baffling to me, it's not working. The CSS could hardly be cleaner or less, but the top isn't aligning properly. I thought it could be a floating issue, but even after applying a clear:both it doesn't fix this.
Please see the program here:
https://jsfiddle.net/yezwocta/
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Add vertical-align: top; to your .article CSS (the default is baseline):
#page {
text-align: center;
}
.article {
width: 350px;
height: 150px;
margin: 5px;
display: inline-block;
background-color: #fafafa;
vertical-align:top;
}
.article img {
float: left;
width: 150px;
height: 130px;
margin-top: 10px;
}
.content {
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
.title {
font-size: 1.2rem;
}
.source {
font-size: 0.8rem;
position: absolute;
bottom: 0;
left: 0;
}
<div id="page">
<div class="article">
<a href="https://cnn.com" target="_blank">
<img alt="News" src="https://loremflickr.com/150/130/news?random=1">
<div class="content">
<span class="title">Cable News Network</span>
<span class="source">CNN</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">
<img alt="Firefox browser" src="https://loremflickr.com/150/130/browser?random=2">
<div class="content">
<span class="title">Get the Latest Firefox Browser</span>
<span class="source">Mozilla</span>
</div>
</a>
</div>
<div class="article">
<a href="https://www.kproxy.com/" target="_blank">
<img alt="kproxy" src="https://loremflickr.com/150/130/proxy?random=3">
<div class="content">
<span class="title">Surf the web anonymously and bypass filters</span>
<span class="source">kproxy</span>
</div>
</a>
</div>
</div>
Could somebody help me with this HTML to make the <h1> and <h2> texts centrify, because I have lost it a bit on this.
<div class="container-fluid">
<a href="http://www.pagename.com" style="text-decoration: none; color: black">
<div class="pull-left" style="top: 270 px">
<img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>
</div>
<div style="position: absolute; width: 100%; text-align: center">
<h1 style="font-size: 7vw; position: relative; top: 2.5vh">PAGENAME.COM</h1>
<h2 style="font-size: 2.3vw"SLOGAN FOR THE WEBSITE</h2>
</a>
</div>
<div class="pull-right" style="margin-left: 1vw";>
<img src="pic2.gif" alt="Beach" width="215px" height="215px" />
</div>
Is this what you need?
https://jsfiddle.net/scorpio777/k99ywpng/6/
CSS
h1 {
font-size: 7vw;
position: relative;
top: 0.5vh
}
h2 {
font-size: 2.3vw
}
.container-fluid {
width: 100%;
position: relative;
}
.pull-left {
vertical-align: top;
display: inline;
position: absolute;
left: 0;
}
.pull-right {
height: 215px;
vertical-align: top;
display: inline;
position: absolute;
right: 0;
}
.center {
display: inline;
position: absolute;
width:100%;
text-align:center;
z-index: 2;
}
HTML
<div class="container-fluid">
<a href="http://www.pagename.com" style="text-decoration: none; color: black">
<div class="pull-left">
<img src="pic1.gif" alt="Paradise" width="215px" height="215px"/>
</div>
<div class="center">
<h1>PAGENAME.COM</h1>
<h2>SLOGAN FOR THE WEBSITE</h2>
</div>
</a>
<div class="pull-right">
<img src="pic2.gif" alt="Beach" width="215px" height="215px" />
</div>
</div>
Try this:
CSS
.your-element {
display: flex !important;
flex-flow: row wrap !important;
justify-content: center !important;
}
hi I'm assigned to do a basic profile page for class, but for one of the html pages I am unable to put the text in front of each individual image, i removed my attempts at it to help ease confusion.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr></hr>
<img src="assets/images/gym.jpg" alt="gym">Gym
<img src="assets/images/hiking.jpg" alt="hiking">Hiking
<img src="assets/images/overwatch.jpg" alt="overwatch">Overwatch
<img src="assets/images/running.jpg" alt="running">Running
<img src="assets/images/programming.jpg" alt="programming">Programming
</div>
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
You'll need to absolute position your text in front of the image with css. It helps to wrap each image and text item into a block to apply the css.
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="assets/images/gym.jpg" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="assets/images/hiking.jpg" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="assets/images/overwatch.jpg" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="assets/images/running.jpg" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="assets/images/programming.jpg" alt="programming">
<span>Programming</span>
</div>
</div>
css:
.item {
position: relative;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Edit: Added a simplified fiddle example
* {
box-sizing: border-box;
}
.aboutmeprofile {
float: left;
background-color: white;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.item {
position: relative;
width: 100%;
}
.item span {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
text-align: center;
width: 100%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr/>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="gym">
<span>Gym</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="hiking">
<span>Hiking</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="overwatch">
<span>Overwatch</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="running">
<span>Running</span>
</div>
<div class="item">
<img src="https://placehold.it/400x300/ddd/ddd" alt="programming">
<span>Programming</span>
</div>
</div>
The best way to do this is to create a div for the label and use the image as the background-image for the div.
background-image: image.png
jsfiddle
this is what I came up with. Just add the other images and its respective label:
#h2, #h3 {
color: #4aaaa5;
text-align: left;
font-size: 30px;
font-weight: bold;
font-family: 'Georgia', Times, Times New Roman, serif;}
#linebreak {
clear: both;
border: 1px solid gray;
width: 100%;
margin: 0;
padding: 0;}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.aboutmeprofile {
float: left;
background-color: white;
width: 650px;
margin: 10px;
line-height: 150%;
padding: 10px;
margin-top: 30px;
}
.container {
height: 100%;
width: 100%;
position: relative;
}
.image {
width:100%;
height:100%;
}
.text {
position: absolute;
color: white;
left: 50%;
top: 50%;
}
<div class="aboutmeprofile">
<h2 id="h2">Portfolio</h2>
<hr>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Gym
</span>
</div>
<div class="container">
<img class="image" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" />
<span class="text">
Hiking
</span>
</div>
</div>
Hope it helps!
You can simply do this with position:absolute property , first you need to create a relative div , then call the image and h2 inside the div , then set absolute position to h2
Check with the snippet
.content_div {
position:relative;
}
.content_div h2 {
position:absolute;
bottom:25px;
color:#fff;
font-size:18px;
}
.content_div h2 span {
background:rgba(0,0,0,0.8);
padding:10px;
display:block;
border-bottom:2px solid #000;
}
.content_div h2 span:last-child{
border-bottom:none;
}
<div class="content_div">
<img src="http://www.picgifs.com/graphics/c/cute/graphics-cute-160852.jpg" alt="image" />
<h2>
<span>A Movie in the Park:</span>
<span>Kung Fu Panda</span>
</h2>
</div><!-- /.content_div -->
I have some css issues. I'm trying to remove the space between a image and a label, and it does not work.
This is what I have:
And this is what I want:
I have problems with removing the space below he pictures and the same problem with the labels and the other div below them. In the same time I do not know how to position inline the headers from the footer.
This is my fiddle with my html and css:
https://jsfiddle.net/cwd6qw3o/
div img {
display: inline-block;
height: 30%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
display: inline-block;
margin-top: 0;
text-align: left;
width: 23%;
}
div.subcolor {
background-color: #ba0927;
display: inline-block;
height: 5px;
width: 23%;
}
div.footer {
display: inline-block;
background-color: #e6e6e6;
width: 100%;
height: 5%;
}
Please tell me what i am doing wrong :).
Thanks !
I think it is not a good structure in your HTML,why not wrap your item in the same li such as
<ul>
<li>
<img src="~/Content/cont1.png"/>
<p>Bosch Car Service</p>
</li>
<li>
<img src="~/Content/cont2.png"/>
<p>Afspraak Proefrit</p>
</li>
<li>
<img src="~/Content/cont3.png"/>
<p>Afspraak onderhoud</p>
</li>
<li>
<img src="~/Content/cont4.png"/>
<p>Routebeschrijiving</p>
</li>
</ul>
You can remove spaces with the following CSS:
div {
font-size: 0;
}
div.subtitle {
font-size: 1rem;
}
Live preview: JSFiddle
Additional styling is necessary.
please try below code
div::after {
content: "";
width: 60%;
}
.image-div {
float: left;
width: 100%;
}
div img {
float: left;
height: 30%;
margin-right: 1%;
width: 23%;
}
div.subtitle {
background-color: #333333;
color: white;
float: left;
margin-right: 1%;
margin-top: 0;
text-align: left;
width: 23%;
}
.sub-div {
float: left;
width: 100%;
}
div.subcolor {
background-color: #ba0927;
float: left;
height: 5px;
margin-right: 1%;
width: 23%;
}
<body>
<img src="~/Content/slide1.png" id="slide" />
<div class="image-div">
<img src="http://dummyimage.com/200x200/000/fff"/>
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
<img src="http://dummyimage.com/200x200/000/fff" />
</div>
<div class="sub-div">
<div class="subtitle">
Bosch Car Service
</div>
<div class="subtitle">
Afspraak Proefrit
</div>
<div class="subtitle">
Afspraak onderhoud
</div>
<div class="subtitle">
Routebeschrijiving
</div>
</div>
<div>
<div class="subcolor" id="sub1"></div>
<div class="subcolor" id="sub2"></div>
<div class="subcolor" id="sub3"></div>
<div class="subcolor" id="sub4"></div>
</div>
<div class="footer">
<div class="images">
<img src="~/Content/fb.jpg"/>
<img src="~/Content/contact.jpg"/>
<img src="~/Content/route.jpg"/>
</div>
<div class="information">
<div class="contact">
<h1>Houman BVBA</h1>
<label>Boterstraat 6</label>
<label>B-2811 Hombeek (Mechelen)</label>
<label>Tel. 015 41 39 39</label>
<label>Fax. 015/43 24 40</label>
</div>
<div class="schedule">
<h1>Openingsuren</h1>
<label>Maandag: 9u-12u|13u-18u</label>
<label>Dinsdag: 9u-12u|13u-18u</label>
<label>Woensdag: 9u-12u|13u-18u</label>
<label>Donderdag: 9u-12u|13u-18u</label>
<label>Vrijdag: 9u-12u|13u-18u</label>
<label>Zaterdag: 9u-12u|13u-18u</label>
</div>
</div>
</div>
</body>
I've searched and tried several different suggestions for this, but nothing is working.
I am trying to horizontally center 3 images with a caption underneath. Pretty new to CSS. Thanks for your help in advance!
#container {
margin: auto;
width: 1190px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.box {
display: block;
margin: 0px;
white-space: nowrap;
}
.box img {
display: inline-block;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
.box p {
position: relative;
width: 100%;
top: 12px;
z-index: 2;
text-align: center;
font-size: 1.5em;
left: 15px;
}
.clear {
clear: both;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 1190px;
}
L:
<div id="container">
<div class="wrapper">
<h3>Heading Here</h3>
</div>
<div class="box">
<a href="#">
<img src="images/features-icon-1.png" alt=" ">
<p>Option 1</p>
</a>
<a href="#">
<img src="images/features-icon-2.png" alt=" ">
<p>Option 2</p>
</a>
<a href="#">
<img src="images/features-icon-3.png" alt=" ">
<p>Option 3</p>
</a>
</div>
<div class="clear"></div>
</div>
You were just missing a container wrapper for your content.
I have added a div to wrap your image, text & link.
Also changes .box img to .box div
That's all you were missing.
#container {
margin: auto;
width: 1190px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.box {
display: block;
margin: 0px;
white-space: nowrap;
}
.box div {
display: inline-block;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
.box p {
position: relative;
width: 100%;
top: 12px;
z-index: 2;
text-align: center;
font-size: 1.5em;
left: 15px;
}
.clear {
clear: both;
}
.wrapper {
margin: 0 auto;
padding: 0 10px;
width: 1190px;
}
<div id="container">
<div class="wrapper">
<h3>Heading Here</h3>
</div>
<div class="box">
<div>
<a href="#">
<img src="images/features-icon-1.png" alt=" ">
<p>Option 1</p>
</a>
</div>
<div>
<a href="#">
<img src="images/features-icon-2.png" alt=" ">
<p>Option 2</p>
</a>
</div>
<div>
<a href="#">
<img src="images/features-icon-3.png" alt=" ">
<p>Option 3</p>
</a>
</div>
</div>
<div class="clear"></div>
</div>