I am trying to use CSS to obtain consistent spacing between my images that are listed in the skills section of the HTML code. This is the Code:
.skilllogos {
height: 100px;
width: 100px;
}
.jslogo {
padding-left: 14px;
}
<div class="skill-row">
<img class="skilllogos" src="images/html.svg" alt="html-icon">
<img class="skilllogos" src="images/css3.svg" alt="css-icon">
<img class="skilllogos jslogo" src="images/javascript.svg" alt="javascript-icon">
</div>
Adding the padding to the jslogo does seem to solve the problem (that is how i tried to fix it) but it seems like I'm putting on duck tape to fix the issue and there is probably a better way to do this. If I change the height and width of the images then the spacing will become inconsistent again, it's sort of hard coded and I do not want that. If you haven't guessed already, I am very new to web development so your help is very much appreciated! Thank you!
I think this is what you're looking for
.skilllogos {
height: 100px;
width: auto;
}
.skilllogos:not(:last-of-type) {
padding-right: 14px;
}
<div class="skill-row">
<img class="skilllogos" src="images/html.svg" alt="html-icon">
<img class="skilllogos" src="images/css3.svg" alt="css-icon">
<img class="skilllogos" src="images/javascript.svg" alt="javascript-icon">
</div>
try this
instead of adding padding-left add padding to all
body{
background :#111;
margin:20px auto;
text-align:center;
}
.skill-row{
padding:10px;
background:#fff;
}
.skill-row img{
padding:14px;
border:1px solid #111;
}
<div class="skill-row">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+HTML+5+" alt="html-icon">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+CSS+3+" alt="css-icon">
<img class="skilllogos jslogo" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+JS+5+" alt="javascript-icon">
</div>
Added border to know the space bwteen images by adding js logo only instead add all logo by
.skilllogos {
height: 100px;
width: 100px;
border:2px solid #111;
padding:14px;
}
<div class="skill-row">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.png&text=+HTML+5+" alt="html-icon">
<img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.png&text=+CSS+3+" alt="css-icon">
<img class="skilllogos jslogo" src="https://dummyimage.com/100x100/de4242/fff.png&text=+JS+5+" alt="javascript-icon">
</div>
Related
i have made 5 hyperlinks in html file but i want to give space between them
how should i do it a little help!
thank you!
<body>
<div class="back">
<div class="image">
<img src="comp.jpg" alt="background image" style="width:100%; height:100%">
</div>
<h3 class="name" style="color: #d9d9d9">
ASHUTOSH KUMAR SINGH
</h3>
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
<div class="myimg" align="middle">
<div class="circle" align="middle">
</div>
<img src="ashu.jpg" class="myimage" style="height: 300px; width:300px";>
</div>
</div>
this is my css file: in the code below i have made a class of link in which i
cascaded it. i want to give some equal space between them so that it look neat.
html,body{
margin:0;
}
div.link{
font-size: 25px;
position: fixed;
/*text-space: 100;*/
margin-top:500px;
margin-left: 250px;
}
.back{
height: 100%;
width: 100%;
margin: 0;
}
.image{
position: fixed;
}
.myimg{
position: absolute;
margin-top:100px;
margin-left: 500px;
}
.myimage{
border: 2px solid rgba(114, 114, 114, 0.55);
border-radius: 100%;
}
.circle{
border: 2px ;
border-radius: 100%;
background-color: black;
}
.name{
position: fixed;
margin-top:420px;
margin-left: 530px;
}
I think the most easiest way you're looking for is:
.link a {margin-right:10px;}
the only problem with this is that all link elements get now a margin-right, from the first to the last one.
if you want to exclude the last element to have no margin right, add an additonal:
.link a:last-child{margin-right:0px;}
remember that in css you can perfectly nest css selectors
html body .back .link a{some-css-rule}
by the way, the more specific a selector is, the more important it will be when the browser analyses them)
<div class="some_class" id="some_id" style="color:grey;">sometext</div>
#some_id{color:black;}
.some_class{color:blue;}
div {color:green;}
the color will be grey, because inline selectors have more weight than selectors with ID, which have more weight than selectors with classes, which have more weight than selectors with html containers.
This is called CSS specifity
CSS-specifity calculator by keegan.st
CSS specifity explained by css-tricks
Try to avoid custom CSS-Styles in your HTML-File and include them in your CSS-File. You can use padding or margin in your CSS-File, see this link for the difference.
YourHTMLfile.html
<head>
<link rel="stylesheet" href="YourStyleFile.css">
</head>
<body>
...
<div class="link" align="middle">
About
Contact
Skills
My Work
Blog
</div>
</body>
YourStyleFile.css
.link a {
padding: 16px;
color: white;
}
EDIT: make sure to create a CSS-File and add it to your <head> section of your HTML-File. They both have to be in the same directory. Another reason why my code may not work for you is that maybe you have another CSS-File which overrides the .link class.
Wrap them in a div and style the div with word-spacing: 10px; :)
I have an image and I'm looking at basic customisation for a small website I'm creating in HTML.
I understand you can chamfer an image, as seen on this question here, that gives a 45Degree cut.
I'm hoping for a more rounded Chamfer on each corner? (I believe it's called a Fillet but I'm not 100% sure of the correct terminology.
As seen in the second picture:
Using border-radius: 16px 16px 16px 16px; works by putting it in the img class, but I don't want all images affected.
What do I need to do to allow only select images to be chamfered?
I tried this, but it didn't work:
.img-chamfer {
border-radius: 16px 16px 16px 16px;
}
<div class="img-chamfer">
<img src="Test.png" >
</div>
My exact code can be found here: https://jsfiddle.net/netazv40/
.main {
color:#29abe2;
text-align: center
}
.img-wrapper {
display: inline-block;
}
.img-wrapperPadding {
display: block;
margin: 0 auto 32px;
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
<div class="main">
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
<div class="img-wrapper">
<div class="img-wrapperPadding">
<img src="http://placehold.it/350x208" width="350" height="208"><br/>
<img src="http://placehold.it/100x50" width="100" height="50">
</div>
</div>
</div>
I only need the larger image to be affected/chamfered.
solution after providing your fiddle
You can use the following CSS rule:
.img-wrapperPadding img[width="350"] {
border-radius:16px;
}
Demo: https://jsfiddle.net/netazv40/3/
... or add a class to your image and solve it like the following:
.rborder {
border-radius:16px;
}
<img class="rborder" src="http://placehold.it/100x100"/>
Demo: https://jsfiddle.net/netazv40/1/
solution #1 (using flexbox):
.img-chamfer {
border-radius:16px;
display:inline-flex;
overflow:hidden;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
solution #2 (using inline-block):
.img-chamfer {
border-radius:16px;
display :inline-block;
overflow:hidden;
font-size:0;
}
<div class="img-chamfer">
<img src="http://placehold.it/100x100">
</div>
You can use border-radius like,
div {
border: 3px solid;
border-radius: 30px;
}
I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</div>
</div>
</div>
CSS:
h2{
display:inline-block;
text-transform: uppercase;
text-decoration: none;
color: black;
margin-left:10px;
margin-right:10px;
font-size:14px;
}
.logoHeader{
margin-left:15px;
float:left;
margin-bottom: 20px;
margin-top:15px;
}
.socialIconsWrapHeader{
float:right;
margin-top:15px;
margin-right:20px;
}
.socialIconsWrapHeader a{
margin:0px 10px 0px 10px;
}
.menuPicHeader{
float:left;
margin:20px 0px 0px 130px;
padding-left:10px;
}
.menuPicHeader a{
padding-top:20px;
padding-bottom:2px;
}
2) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/
for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}
You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }
I know this is amateur stuff but I've been trying and trying to get this right and i can't seem to get a fix.
Please take a look at the website screenshot. I'm attempting to make the "call..." text to be inline and to the right of the best#flooring logo.
Here's the code HTML:
<div class="level0">
<div class="topbar">
<h1><% title_content %></h1> <div class="facebookbutton"></div>
<div class="phonetop">Customer services: <strong>0844 209 1560</strong></div>
</div>
</div>
<div class="header">
<div class="level0">
<div class="logonumber">
<img src="<% secure_url %>images/logo.png?r=1" alt="<% title_content %>" />
<div class="headernumber">
<h2>Call <br /> 01132 186 212 <br />for the best prices</h2></div>
</div>
<div class="headfloat">This contains all of the content located on the right hand side </div>
CSS
.level0{
width:970px;
margin:0px auto;
clear:both;
}
.topbar{
height:41px;
color:#747474;
/*text-shadow: 1px 1px 2px #000;*/
}
.header{
background:#fff;
height:166px;/*was 126*/
}
.logonumber {
float:left;
display:inline-block;
}
.logo{
display:block;
}
.headernumber{}
contains the nav, the card images, basket and search.
Any help would be much appreciated.
You need
.headernumber {
float: left;
}
and you also need to decrease the size of the .headfloat element because its width does not allow all three elements in the same line
so change the .headfloat rule to
.headfloat {
float: right;
padding-top: 13px;
text-align: right;
width: 350px; /*was 460px*/
}
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)