I'm trying to make these 4 images to be circle but I guess I'll just use images later but anyway. I'm trying to put a title under the image (bottom-middle) but instead its at the top. This is what happened.
.services img{
border-radius: 50%;
padding-left: 10px;
float: left;
display: block;
}
<section class="services">
<h1 style="text-align:center; font-size:38px;">Services we offer</h1>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
</section>
So it'd look like my design.
You need also to set the .circle class to float left:
.circle
{
width: 25%;
float: left;
}
http://jsfiddle.net/yh988n5e/
.circle{
text-align: center;
display: inline-block;
}
.services img{
border-radius: 50%;
padding-left: 10px;
display: block;
}
http://jsfiddle.net/mx7xknzr/1/
Related
I am trying to make my own web page.
so what i want is text on left and image on right.
problem 1: image will not change the size to 300px
problem 2: i am trying to have the image on the right side, I tried using float and it did not work.
p,
h1 {
margin: 0px;
padding: 0px;
}
.top {
margin-left: 20%;
}
.top img {
float: right;
margin-right: 35%;
width: 300px;
height: 300px;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting my page.
</p>
<br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
Try this:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.words, .list{
width: 100%;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
try this code:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
height: auto;
background-color: aqua;
padding: 20px;
display: inline-block;
width: 100%;
}
.top img{
float:right;
width:300px;
height:300px;
}
<body>
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</ul>
</div>
</body>
The image gets 300px width, but for making it better add a .image class in your css. Use flex display instead of using float. to set your image on right you can simply add rtl direction to div with top class or put it after div with word class.
p,h1{
margin: 0px;
padding: 0px;
}
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
justify-content: center;
align-items: center;
}
.top .image img{
width:300px;
height:300px;
}
<div class="top">
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
<div class="image">
<img src="http://simpleicon.com/wp-content/uploads/user1-256x256.png" />
</div>
</div>
I have a problem with centering .social divs in outer div. I was searching an answer but I can't find a working solution. Here's HTML:
<div class="socials">
<div class="social">
<img src="images/fb.png">
</div>
<div class="social">
<img src="images/insta.png">
</div>
<div class="social">
<img src="images/tt.png">
</div>
<div class="social">
<img src="images/snap.png">
</div>
</div>
And CSS:
.social {
width: 25px;
height: 25px;
float: left;
cursor: pointer;
}
I want to .social divs are next to each other and centered to .socials div.
This should help, give this try.
.social {
width: 25px;
height: 25px;
float: left;
cursor: pointer;
display: table-cell;
}
.socials {
display: table;
margin-left: auto;
margin-right: auto;
}
<div class="socials">
<div class="social">
<img src="images/fb.png">
</div>
<div class="social">
<img src="images/insta.png">
</div>
<div class="social">
<img src="images/tt.png">
</div>
<div class="social">
<img src="images/snap.png">
</div>
</div>
I think this is the answer you are looking for. Do this in your css
.social {
display: inline-block;
width: 25px;
height: 25px;
cursor: pointer;
}
.socials{
text-align:center;
}
Click here to see the codepen
I am trying to add text next to the image. The tag stands in prefered position, but when I use tag, the second line goes under the image. I found lots of similar questions in google, but non works for me. Here is the code:
#quality {
float: left;
margin-right: 10px;
padding: 20px;
}
#security {
padding-bottom: 10px;
}
<div id="quality">
<div id="security">
<img src="img/security.png">
<h3>Title</h3>
<br>
<span>Sample text is here</span>
</div>
</div>
Remove the br tag after h3.
Try this html:
<div id="quality">
<div id="security">
<img src="img/security.png">
<div class="rightDiv">
<h3>Title</h3>
<span>Sample text is here</span>
</div>
</div>
</div>
add CSS:
#security img, #security .rightDiv{
display:inline-block;
vertical-align: top;
}
Use float for the image and the content you want to be next to it. Try the fiddle below:
#quality {
float: left;
margin-right: 10px;
padding: 20px;
}
#security {
padding-bottom: 10px;
}
img{
float: left;
}
.text-container{
float: left;
}
<div id="quality">
<div id="security">
<img src="https://8biticon.com/static/8bit/img/male/background4.png">
<div class="text-container">
<h3>Title</h3>
<br>
<span>Sample text is here</span>
</div>
</div>
</div>
try this
[demo]
html
<div id="quality">
<div id="security"> <img src="data:image/png;base64,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"> </div>
<div class="discription">
<h3>Title</h3>
<br>
<span>Sample text is here</span> </div>
</div>
css
#quality {
display: table;
margin-right: 10px;
padding: 20px;
}
#security {
padding-bottom: 10px;
display:table-cell;
}
.discription{
display:table-cell;
vertical-align:top;
padding:0 20px;
}
try this way
#quality {
margin-right: 10px;
padding: 20px;
}
#quality img{float:left; width:60px;}
#security {
padding-bottom: 10px;
}
#quality .contetn{width:calc(100% - 65px);float:right;}
#quality .contetn h3{margin-top:0;}
<div id="quality">
<div id="security">
<img src="img/security.png">
<div class="contetn">
<h3>Title</h3>
<span>Sample text is here</span>
</div>
</div>
</div>
You can do like this
#quality {
float: left;
padding: 20px;
}
#security {
padding-bottom: 10px;
float:left;
margin-right: 10px;
}
#text{
float:left;
}
<div id="quality">
<div id="security">
<img src="img/security.png">
</div>
<div id="text">
<span>Sample text is here</span>
<h3>Title</h3>
</div>
</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>
Im trying to put together some images together with an text under the images which will work as an menu, which should be centered horizontal under an header. The website is supposed to work as an responsive website. The HTML and CSS code is currently looking like this:
Edited
I want 5 images, each one of them shall have a text under them. And I want the my images together with the text to be centered.
HTML
<nav>
<div id="content">
<img src="ikoner/icon_90_2.png"/>
<div class="text">Utvecklingen sedan 90-talet</div>
</div>
<div id="content">
<img src="ikoner/icon_html5.png"/>
<div class="text">HTML5</div>
</div>
<div id="content">
<img src="ikoner/icon_html5video.png"/>
<div class="text">HTML5 Video</div>
</div>
<div id="content">
>img src="ikoner/icon_responsive.png"/>
<div class="text">Responsive Webdesign</div>
</div>
<div id="content">
<img src="ikoner/icon_heart.png"/>
<div class="text">Emotional Design</div>
</div>
</nav>
CSS
#content {
position: relative;
width: 15%;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#content img {
padding-top: 370px;
width: 100px;
}
.text {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
You're not aligning your "Nav" div anywhere.
So, I've changed the id="content" to classes, because IDs should be unique to the page.
Set nav element to text-align:center. Here's a fiddle, and the relevant code:
http://jsfiddle.net/cw16tkdn/2/
<nav>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Utvecklingen sedan 90-talet
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">HTML5 Video
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Responsive Webdesign
</div>
</div>
<div class="content">
<img src="http://placekitten.com/g/200/200" />
<div class="text">Emotional Design
</div>
</div>
</nav>
and CSS:
nav {
text-align:center;
}
.content {
display: inline-block;
text-align: center;
}
.content img {
width: 100px;
}
.text {
font-size: 12px;
font-family:'ciclethin';
text-decoration: none;
}
maybe you want this: (i have changed id=content with class=content in html code!)
.content {
position: relative;
width: 100px;
display: inline-block;
height: 520px;
text-align: center;
vertical-align:bottom;
}
.content img {
padding-top: 370px;
width: 100px;
display:block;
margin: auto;
}
.text a {
font-size: 12px;
font-family: 'ciclethin';
text-decoration: none;
}
.text {
height: 3em;
}