I wanted to create a centered social bar, here the code:
HTML&CSS:
.social-detail {
color:#fff;
font-family: ProximaNovabold;
}
.icon-social {
height: 50px;
width: 208px;
background: url(../../images/contact.png) center center no-repeat;
float: left;
}
#social {
padding: 0px 0px 2px 0px;
float: center;
}
#social li {
height: 42px;
padding: 2px 0px;
float: left;
}
#social .social-icon {
float: left;
cursor: pointer;
}
.social-info {
font-size: 14px;
color: #fff;
line-height: 36px;
padding-left: 50px;
padding-right: 10px;
width: 198px;
text-align: left;
font-family: ProximaNovabold;
}
<div class="social">
<ul id="social">
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/phone.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">+123 456 789</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/bbm.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">1A2B3C4D</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/yahoo.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/skypee.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
<li>
<div class="social-icon"><img src="http://rajawaliqq.com/app/img/images/icons/facebook.png" title="" alt=""></div>
<div class="social-info">
<div class="social-detail">rakensu</div>
</div>
</li>
</ul>
</div>
and here the result:
I think you can solve giving a fixed width, padding: 0 and margin: 0 auto
ul#social {
width: 1000px;
padding: 0;
margin: 0 auto
}
you can change the width to fit the icons...
delete the float: center property, it doesn't exist...
Wrap your icons in a div thats is not affected by your background image:
<div class="social">
<div id="centeringdiv">
<ul id="social">
</ul>
</div>
</div>
and set that new div to "center"
#centeringdiv {
margin: 0 auto;
}
Related
I have been designing a website using html and css, for which i have made a footer.
the code for the footer is as follows:
footer {
color: white;
width: 100%;
height: 40px;
padding: 0;
display: block;
clear: both;
}
.footrow {
overflow: hidden;
background-color: #111;
display: block;
line-height: 18px;
background-image: url('../images/footer.jpg');
}
.footrow2 {
overflow: hidden;
background-color: #002c42;
display: block;
padding: 15px;
height: 48px;
}
.foot {
max-width: 1080px;
margin: 0 auto;
font-size: 11px;
}
.foot-p {
font-weight: 600;
color: #66e355 !important;
margin: 15px;
}
.half-width {
width: 50%;
float: left;
line-height: 1px;
}
.quarter-width {
width: calc(25% - 30px);
float: left;
padding: 20px;
}
#social2 {
display: block;
background-color: transparent;
float: left;
margin: 0 auto;
}
.sc-icn2 {
width: 50px;
height: 50px;
display: block;
margin-right: 5px;
margin-bottom: 5px;
float: left;
}
<footer>
<div class="footrow">
<div class="foot">
<div class="quarter-width">
<p style="color:#fff;">Address</p>
<hr>
<div>
Science & Technology University
<hr> Phone: 02-7458745
<hr> Email: registrar#abc.gmail.com
</div>
</div>
<div class="quarter-width">
<p style="color:#fff;">Quick Links</p>
<hr>
Link 1<br>
Link 2<br>
Link 3<br>
</div>
<div class="quarter-width">
<p style="color:#fff;">Follow Us</p>
<hr>
<div id="social2">
<div class="sc-icn2">
<img src="images/social/facebook.png" width="50px" height="50px" alt="facebook" title="fb">
</div>
<div class="sc-icn2">
<img src="images/social/twitter.png" width="50px" height="50px" alt="twitter" title="#board">
</div>
<div class="sc-icn2">
<img src="images/social/instagram2.png" width="50px" height="50px" alt="instagram" title=" Photography">
</div>
</div>
</div>
<div class="quarter-width">
<p style="color:#fff;">Report</p>
<hr>
<a style="cursor:pointer;" onclick="feedClick('bug')">Found
a Bug</a><br>
<a style="cursor:pointer;" onclick="feedClick('feed')">Feedback</a><br>
<a style="cursor:pointer;" onclick="feedClick('feature')">Request feature</a><br>
</div>
</div>
</div>
<div class="footrow2">
<div class="foot">
<div class="half-width">
<p class="foot-p">©- 2018 | All rights reserved</p>
</div>
<div class="half-width">
<p style="float:right !important;" class="foot-p">Developed & Maintained By <a style="color:orange" href="https://www.facebook.com/abc"><strong>SK Biswas</strong></a></p>
</div>
</div>
</div>
</footer>
The footer has two parts. one is within class "footrow" and another is within "footrow2". footrow will take position above footrow2. the problem is the height of the content of footrow2 class is taking different height for different pages. Is there any way to make it of a fixed height?
If you want to give any element 100% width of your page better use the vw instead of % as:
width: 10vw;
vw stands for viewport width and 10 means 100%. It will set the complete width on all devices.
I'm coding school project website and I got a problem. When I resize the width of browser, child divs float down from header, thus width of div under header is affected by floated-off divs from header.
<body>
<div id="page" class="page">
<div id="header" class="header">
<div class="headerContainer">
<h1><img src="images/logo.png" alt="Gastronerez"><span>Gastronerez</span></h1>
<ul class="menu">
<li class="active">Home</li>
<li>O nás</li>
<li>Novinky</li>
<li>Jak objednat</li>
<li>Kontakty</li>
</ul>
<ul class="contact">
<li class="first"><i class="fa fa-mobile" aria-hidden="true">
</i>+420 603 585 561</li>
<li><a href="mailto:obchod#gastronerez.cz" title="E-mail"><i
class="fa fa-envelope-o" aria-hidden="true"></i>obchod#gastronerez.eu</a></li>
</ul>
<ul class="lang">
<li class="cz">CZ</li>
<li class="line">|</li>
<li class="sk">SK</li>
</ul>
</div>
</div>
<div id="categories" class="categories">
<div class="categoriesContainer">
<div class="icons">
<div class="optionlink"><a href="" title="Pracovní stoly">
<div class="option">
<div class="white">
<div class="spriteshape-2"></div>
</div>
<div class="description special"><span>Pracovní stoly</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Stolové nástavby">
<div class="option">
<div class="gray">
<div class="spriteshape-3"></div>
</div>
<div class="description special"><span>Stolové nástavby</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Pracovní desky">
<div class="option">
<div class="gray">
<div class="spriteshape-4"></div>
</div>
<div class="description special"><span>Pracovní desky</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Mycí stoly">
<div class="option">
<div class="gray">
<div class="spriteshape-5"></div>
</div>
<div class="description"><span>Mycí stoly</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Regály">
<div class="option">
<div class="gray">
<div class="spriteshape-6"></div>
</div>
<div class="description"><span>Regály</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Skříně">
<div class="option">
<div class="gray">
<div class="spriteshape-7"></div>
</div>
<div class="description"><span>Skříně</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Police">
<div class="option">
<div class="gray">
<div class="spriteshape-8"></div>
</div>
<div class="description"><span>Police</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Podstavce">
<div class="option">
<div class="gray">
<div class="spriteshape-9"></div>
</div>
<div class="description"><span>Podstavce</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Pojezdové dráhy">
<div class="option">
<div class="gray">
<div class="spriteshape-10"></div>
</div>
<div class="description special"><span>Pojezdové dráhy</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Výlevky">
<div class="option">
<div class="gray">
<div class="spriteshape-11"></div>
</div>
<div class="description"><span>Výlevky</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Digestoře">
<div class="option">
<div class="gray">
<div class="spriteshape-12"></div>
</div>
<div class="description"><span>Digestoře</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Vyhřívané">
<div class="option">
<div class="gray">
<div class="spriteshape-13"></div>
</div>
<div class="description"><span>Vyhřívané</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Chladící">
<div class="option">
<div class="gray">
<div class="spriteshape-14"></div>
</div>
<div class="description"><span>Chladící</span></div>
</div>
</a></div>
<div class="optionlink"><a href="" title="Transportní zařízení">
<div class="option">
<div class="gray">
<div class="spriteshape-15"></div>
</div>
<div class="description special"><span>Transportní zařízení</span></div>
</div>
</a></div>
</div>
</div>
</div>
CSS:
.page{
margin: 0 auto;
position: relative;
}
.header{
background-color: white;
min-height: 125px;
height: 100%;
}
.header .headerContainer{
max-width: 1800px;
width: 100%;
min-height: 125px;
height: 100%;
margin: 0 auto;
position: relative;
}
.header h1{
display: inline-block;
width: 249px;
height: 85px;
margin: 0;
margin-top: 21px;
margin-left: 28px;
float: left;
}
.header h1 span{
display: none;
}
.header ul{
padding: 0;
margin: 0;
}
.header .menu{
font-size: 15px;
font-weight: 600;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 122px;
float: left;
}
.header .menu li{
text-decoration: none;
display: inline-block;
margin-right: 46px;
}
.header .menu li:hover{
color: #00aab9;
border-bottom: 3px solid;
}
.header .menu li a{
text-decoration: none;
color: black;
}
.header .menu .active{
color: #00aab9;
border-bottom: 3px solid;
}
.header .contact{
font-family: 'Muli';
font-size: 15px;
font-weight: 400;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 404px;
float: left;
}
.header .contact li{
text-decoration: none;
display: inline-block;
color: #454545;
}
.header .contact li.first{
margin-right: 16px;
}
.header .contact li i{
font-size: 20px;
margin-right: 10px;
color: #00aab9;
}
.header .contact a{
text-decoration: none;
color: #454545;
}
.header .lang{
font-size: 15px;
font-weight: bold;
display: inline-block;
margin: 0;
position: relative;
top: 56px;
left: 474px;
float: left;
}
.header .lang li{
text-decoration: none;
display: inline-block;
}
.header .lang li.cz{
color: #00aab9;
margin-right: 16px;
}
.header .lang li.line{
margin-right: 19px;
color: #c0c0c0;
}
.header .lang li.sk{
color: #3b3b3b;
}
.header .lang li a{
text-decoration: none;
}
.header .lang li.cz a{
color: #00aab9;
}
.header .lang li.sk a{
color: #3b3b3b;
}
.categories{
min-height: 230px;
height: 100%;
background-color: #13bcca;
position: relative;
overflow: auto;
}
.categories .categoriesContainer{
max-width: 1800px;
width: 100%;
margin: 0 auto;
position: relative;
}
.categories .icons{
max-width: 1233px;
width: 100%;
margin: 0 auto;
min-height: 150px;
height: 100%;
padding-top: 36px;
}
.categories .optionlink{
height: 59px;
width: 175px;
display: inline-block;
margin-bottom: 29px;
float: left;
}
.categories .icons a{
text-decoration: none;
}
.categories .option{
height: 59px;
width: 175px;
display: inline-block;
margin-bottom: 29px;
float: left;
}
.categories .icons .white, .categories .icons .gray{
display: inline-block;
float: left;
line-height: 70px;
}
.categories .icons .white{
width: 59px;
height: 59px;
background-color: #fff;
border-radius: 50%;
text-align: center;
}
.categories .icons .gray{
width: 59px;
height: 59px;
background-color: #3a3c48;
border-radius: 50%;
text-align: center;
}
.categories .description{
margin-left: 72px;
line-height: 1px;
width: 69px;
text-align: left;
position: relative;
top: 21px;
}
.categories .special{
top: 14px;
}
.categories div span{
font-weight: bold;
color: white;
font-size: 13px;
text-align: left;
line-height: 16px;
}
It's looking like this now: https://imgur.com/a/iZOF5
And I need it look like this: https://imgur.com/a/SAQ5O
Any overflow doesn't work, the second picture has strict height, but I need it being adjusted according to size of window.
Does anybody know where is the problem? Thanks for solutions.
You need to update the categories class according to this:
.categories{
min-height: 230px;
height: 100%;
background-color: #13bcca;
position: relative;
overflow: auto;
width: 100%;
}
Specify the width attribute.
No need to change display attributes or something, you only need to update the width of the container. However, I recommend you to have only one container class and please avoid that "div" hell - it's really hard to read such a code (you probably don't need to have 5 nested div's in one block of code).
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 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'm trying to format a website with Dreamweaver and CSS, but I'm getting unwanted margins on the "left" div that runs the length its container:
<div class="cover">
<div class="Header">
<div class="header_left"><input name="searchbar" type="text" class="header_searchbar" value="Search" maxlength="50">
<img src="image/search.jpg" width="122" height="344" align="baseline" class="header_search_icon"></div>
<div class="header_center"> <img src="image/logo.jpg" width="194" height="81" hspace="53" class="logo"></div>
<div class="header_right">
<div class="header_right_login">Sign In</div>
<img src="image/lock.jpg" width="11" height="16">
<div class="header_right_language">
<p>Languages</p>
</div>
</div>
</div>
<div class="Content">
<div id="hot_bar">
<div id="left"> <img src="image/left.jpg" alt="" width="33" height="65"></div>
<div id="center"> content placeholder</div>
</div>
</div>
<div class="footer">
<ul>
<li>About </li>
<li2>/</li2>
<li>Family</li>
<li2>/</li2>
<li>Privacy Policy</li>
<li2>/</li2>
<li>Terms of Service</li>
<li2>/</li2>
<li>Help</li>
<li2>/</li2>
<li>Contact Us</li>
</ul>
</div>
</div>
CSS:
#left {
height: 298px;
width: 54px;
margin: 0px;
padding: 0px;
clear: left;
}
.cover .Content #hot_bar #left img {
margin-top: 125.5px;
}
#center {
height: 298px;
width: 724px;
margin-left: 0px;
float: none;
}
#right {
margin: 0px;
padding: 0px;
clear: right;
height: 298px;
width: 98px;
}
.right {
margin: 0px;
padding: 0px;
clear: right;
height: 298px;
width: 98px;
}
div {
width: 150px;
}
body {
margin: 0px;
padding: 0px;
}
Edit: it looks like this in Chrome's inspect elements:
The Chinese part is the content placeholder. The content part looks like this:
Excuse me for the poor formatting. I'm quite new at this.
You should change css order.
body ,div,......,left,... and add !important. inside #left
/* !important is an optional . */
#left {
height: 298px;
width: 54px;
margin-left: 0px !important;
padding-left: 0px !important;
left:0 !important;
top:0 !important;
clear: left;
}
.content,#hot_bar{
margin-left: 0px ;
padding: 0px 0px;
clear: left;
left:0 !important;
}
fiddle