I have this site:
http://www.les-toiles.co/
In the footer of the site I have 3 items ("contact info","customer care","about us","social media").
How do I do to have an equal distance between these elements?
I've tried to modify the CSS code but unfortunately we did.
I posted a section of code that I have no idea who would be best suited for this problem.
I would ask if you can inspect least CSS code and give me advice please.
<div class='footer'>
<div class='footer-box'>
</div>
<div class='footer-box'>
</div>
<div class='footer-box'>
</div>
</div>
.footer-box
{
width: 33.33%;
float: left;
box-sizing: border-box;
padding: 20px;
}
Related
I am learning HTML and CSS. But this thing is getting on my nerves. I have tried everything to solve this thing but unable to do so. I am practicing with a sample website.
Main issue i Am trying to apply this logo which I marked under a rectangle above two ".divs". Sorry I am newbie and don't know how to properly. I am attaching my coding below of css.
I need to put those two divs below this image.
I am newbie so don't know how to paste code. This thing is new for. please any help would be appreciated. enter link description here
Okay, Well its hard to see without the images actually being included on the codepen.
I've gone through your code and eliminated the syntax errors/spelling mistakes etc and made it abit cleaner, so hopefully it will work for you, if not if you can provide images on the codepen it would make it alot easier.
HTML:
<body>
<div class="image">
</div>
<div id="wrapper">
<header>
<div class="headerbox1"></div>
</header>
<div class="banner">
<div class="headerbox2"></div>
</div>
</div>
</body>
</html>
CSS:
body {
background:#BCBCBC;
}
#wrapper {
height:2278px;
width:1600px;
background:#ABFF7E;
margin: 0 auto;
}
header{
width:1600px;
height:57px;
background:#FF1D21;
margin: 0 auto;
}
.headerbox1{
width:1600px;
height:57px;
background:#EDE8E9;
margin: 0 auto;
}
}
.banner{
width:1600px;
height:559px;
background:url(../../Images/alpha.jpg);
}
.headerbox2{
width:1600px;
height:63px;
background:rgba(0,0,0,0.4);
margin: 0 auto;
}
.image {
width:219px;
height:185px;
background:url(../../Images/logo%20spotless.png);
display: inline-block;
margin: 0 auto;
}
I could see no relevant reason for you to use the <td> tags in your html, especially as you don't have a table in there, so i have took them out.
Hope this helps, If not your need to provide images aswell.
I am a newbie to bootstrap. I have developed a weppage using bootstrap3. I'm using these two classes on the same element, but the css is not having any effect:
HTML:
<div class="col-md-4 auminascroll">
dfgdgdfgdfgsdfgh cxzvdzfhfdbfd fbfddf
</div>
<div class="col-md-4 auminascroll">fghfdghfdhdfhfdsh</div>
<div class="col-md-4 auminascroll">dfgdsgdsfg</div>
Css:
.col-md-4 .auminascroll {
height: 50px;
overflow-y: auto;
}
I am not getting a scroll when using above code. If I put height: 50px; overflow-y: auto; in a style tag, my code works fine. Why is this css not having an effect when using it with this bootstrap class? Is there any problem with my code?
Any help will be greatly appreciated!!!
You're nearly there! When using a selector to choose two classes there should be no space between the class names - they just need separating with a dot.
.col-md-4.auminascroll { /* no space between the two classes */
height: 50px;
overflow-y: auto;
}
Your code (where there's a space between the two classes: .class-a .class-b would actually look for an element of class-b inside and element of class-a.
<div class="col-md-4">
<div class="auminascroll">
</div>
</div>
You are using the wrong css selector. You need to use it like:
.col-md-4.auminascroll {
height: 50px;
overflow-y: auto;
}
I have the following html. I need to align the .faf-text fields to each other vertically without using a table.
<div id="faf-field-2" class="faf-field faf-field-input ">
<div class="faf-name"> Vendor </div>
<div class="faf-text"> Brocade </div>
</div>
<div id="faf-field-6" class="faf-field faf-field-input ">
<div class="faf-name"> Platform </div>
<div class="faf-text"> ADX </div>
</div>
<div id="faf-field-7" class="faf-field faf-field-input ">
<div class="faf-name"> Version </div>
<div class="faf-text"> 12.4 </div>
</div>
An example of what the layout should be like is below :
Vendor Brocade
Platform ADX
Version 12.4
Thanks
You can use the CSS display: table to make your elements act like a table.
Use display: table-row; for the container <div> tags to make it behave like a <tr> and display: table-cell; for the elements inside to make it behave like <td>.
Something like this:
.faf-field-input{
display: table-row;
}
.faf-field-input div{
display: table-cell;
}
.faf-name{
width: 80px; /*for testing*/
}
jsFiddle DEMO
Just use
float: left
for both classes.
An ex:
.faf-name{
width: 200px;
float: left;
/* other CSS may come here */
}
in the same way,
.faf-text{
width: 200px;
float: left;
/* other CSS may come here */
}
It would have been easier and clearer if you have provided jsfiddle. Hope this will work for you
Just Use this css property so faf-text fields to each other vertically without using a table.
.faf-field{display:table-cell;}
DEMO
From your code, it looks to me that you are displaying tabular data.
So it's perfectly good to use a table.
I keep reading that you can use html/css columns without using them in a table. The www.w3schools.org site shows that you can, but I can't get it to work out at all in my code. basically I have this idea.
<div container="name">
<dl>item 1 </dl>
<dd>explain</dd>
<dl>item 2 </dl>
<dd>explain</dl>
...
</div>
What I need is for the container to have three columns and the section with the detailed list to be two columns than I will put the info for the third column in its own column. I know the column span is the best way to keep that separate, but I can't find any good explanations for this. And I can't get it to work out of my css page or html page.
I think you're going about it the wrong way. Try this.
html:
<div id="container">
<div id="left-col">
<!-- left column -->
</div>
<div id="content-col">
<!-- content column -->
</div>
<div id="right-col">
<!-- left column -->
</div>
</div>
css:
#container { overflow: hidden; width: 940px; }
#left-col { float: left; width: 200px; margin-right: 20px; }
#content-col { float: left; width: 500px; }
#right-col { float: right; width: 200px; }
demo - http://jsfiddle.net/gk5vD/
FYI - you misunderstood what a dl is, have a look at http://www.htmldog.com/reference/htmltags/dl/
Firstly, please don't use w3schools. </rant>
CSS3 has columns built in. Have a read about it here and here.
I am trying to align a full name,picture and the post just like they do in most social networks (linked-in or facebook).But i cant align them the well.Can anybody please try to fill the gaps with necessary css commands?Thank you in advance.
<div>
<span class="picture"> <img src="/assets/images/rails.png"/></span>
user-full-name
<span class="post"></span>
</div>
css
.picture{height:40px;
width:40px;
}
.user-name{
margin-bottom:35px;
}
.post{ }
.inline_table{
display: inline-table;
position: relative;
}
is another property you might want to look at ... any element which has both position relative AND inline table .. will be aligned left to right butted up against each other.
so in this example:
<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">
will all be aligned along the same row
Here's a basic example: http://jsfiddle.net/GU2aM/ to get you started.
span.picture {
display: block;
float: left;
margin-right: 10px;
}