I all, i've this part of code
HTML:
<div id="services"></div>
<div class="modular-row features small">
<div class="content-inner">
<h1>Für alle Ihre Werte</h1>
<div class="feature-items">
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon1.png" />
<div class="feature-content icon-offset">
<h4>Rechenzentrum</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon2.png" />
<div class="feature-content icon-offset">
<h4>Kollaboration</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon3.png" />
<div class="feature-content icon-offset">
<h4>Archiv</h4>
</div>
</div>
<div class="feature">
<img style="" src="/sdstest/user/pages/01.home/_01.services/icon4.png" />
<div class="feature-content icon-offset">
<h4>Wertsachen</h4>
</div>
</div>
</div>
</div>
CSS:
.feature { margin-right: 2rem; }
What i need is
1: to center the class="feature" elements in the middle
2: have a bit of space between that elements (as is it now).
But this is result:
How can i solve it?
(Demo): https://jsfiddle.net/kf3u042k/
You can change css somthing like this
.modular .features .feature {
display: block;
float: left;
margin-bottom: 1rem;
margin-top: 2rem;
vertical-align: top;
width: 24%;
}
.feature {
margin-right: 15px;
}
Try to add this code into your stylesheet. .feature{
margin-left:auto;
margin-right:auto;
max-width:900px;
}
You have to fix the width and then put your side margin on auto. It would be something like this:
.feature{
max-width:900px;
margin-left:auto;
margin-right:auto;
padding-left: x px;
}
for the space just ad a padding-left on your feature (cf code). Still if your width is not large enough it will go bad
Related
I have the following div arrangement, with the below css. Everywhere online seems to say you need margin:0 auto; for centering, but the text still goes to the top right,
Any help appreciated.
.menu_item {
margin: 0 auto;
}
<div style='position:absolute;width:110%;height:110%;left:-5%;top:-5%;background-color:white;z-index:7;overflow:none;'>
<div id='menu_but' style='width:36px;height:36px;'>
<div class='menu_line' />
<div class='menu_line' />
<div class='menu_line' />
</div>
<div id='menu'>
<div class='menu_item'>HOME</div>
<div class='menu_item'>ABOUT US</div>
<div class='menu_item'>CONTACT US</div>
<div class='menu_item'>PORTFOLIO</div>
</div>
</div>
First of all, <div> is not a self-closing tag so you have to write </div> instead of <div class='menu_line'/>
Then, you could simply do:
<style>
.menu_item{
display: inline-block;
}
#menu {
position: relative;
text-align: center;
}
</style>
<div id="menu">
<div class="menu_item">HOME</div>
<div class="menu_item">ABOUT US</div>
<div class="menu_item">CONTACT US</div>
<div class="menu_item">PORTFOLIO</div>
</div>
maybe use flexbox ?
.parent {
display:flex;
justify-content:center;
align-items:center;
}
All of the child elements will be centered
How to align the below image and box in same row? Image on left and box on right with some space between them.
<div id="slideshow" >
<div id="changeimage">
<img class="image" src="bafdf1f214f5a800c95ef301234c254a.iix"/>
</div>
<div id="newsbox">
<span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
</div>
Like #ntgCleaner said: "there's about 20 ways to skin that cat."
This might be one way to achieve this:
#slideshow {
display: flex;
}
.group-box {
margin-top: 50px;
}
<div id="slideshow" >
<div id="changeimage">
<img class="image" src="//thumb7.shutterstock.com/display_pic_with_logo/260389/347420135/stock-photo-top-view-of-architect-drawing-on-architectural-project-347420135.jpg"/>
</div>
<div id="newsbox"><span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
</div>
You can use "float" or "display: inline-block" css selectors to set your elements this way. I belive this simple example will help:
<style>
#slideshow{
border: 1px solid black;
width: 100%;
}
#changeimage{
float: left;
background: blue;
width: 40%;
}
#newsbox{
float: left;
background: red;
width: 40%;
}
#separator {
width: 20%;
height: 100px;
float: left;
background: green;
}
.clear{
clear: both;
}
</style>
<div id="slideshow" >
<div id="changeimage"><img class="image" src="http://www.w3schools.com/html/pic_mountain.jpg"/></div>
<div id="separator"></div>
<div id="newsbox"><span class="label label-danger">Latest News</span>
<div class="group-box">
<div class="grey-group">
<span>Notes:This is a box</span>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
And here is working example:
https://jsfiddle.net/ej53b8x2/
If you want to set elements in row maybe you should use some framework like bootstrap or foundation?
I'm new to html/css and I'm trying to do an adaptive header for the website. I'm using padding-right with 5% for divs, but las div always goes to a new line and the parent div don't want to expand. I want parent div expand depending on the text in child divs. Also when I'm using padding in px, all works properly, but it loses adaptive part.
What am I doing wrong?
With padding in percents
With padding in pixels
HTML and CSS
button{
height:34px;
width:100%;
font-weight:bold;
border:none;
background-color:#fc592d;
color:#ffeded;
border-radius:4px;
}
<div style="width: 100%; background-color: rgb(44, 62, 80); float: left;">
<div style="width: 47.36%; height: auto; margin: auto;">
<div style="display: inline-block; float: left; padding-bottom: 4%; padding-top: 4%;">
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon1.png" alt="farkops">
<a class="href" href="#">One thing</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img src="images/icon2.png" alt="pricep">
<a class="href" href="#">Second</a>
</div>
<div style="display:inline-block; padding-right:5%;">
<img class="href" src="images/icon3.png" alt="otzivi">
<a class="href" href="#">Three</a>
</div>
<div style="display:inline-block;">
<img src="images/icon4.png" alt="works">
<a class="href" href="#">Fourth thing</a>
</div>
</div>
<div style="float: left; display: inline-block; margin-top: 1.24%; margin-left: 2%;">
<div style="">
<p style="margin: 0px; padding-bottom: 8px; font-weight: bold; font-size: 3vh;"><span>7 (905)</span> 639-29-03</p>
</div>
<div style="">
<button>Call</button>
</div>
</div>
</div>
</div>
UPD1:
When I add one new div, the previous one fits just right (the parent div expands as I want), but the new one goes to new line.
This is what I'm trying to do, in between the two pink lines is my max width.
This is what I'm getting:
I'm getting close:
This is my HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
<div class="row">
<div class="col-md-2">
<img src="img/FB_LINK.png" alt="Follow us on Facebook"></div>
<div class="col-md-2">
<img src="img/TWITTER_LINK.png" alt="Follow us on Twitter"></div>
<div class="col-md-2">
<img src="img/LINKEDIN_LINK.png" alt="Link In with Us"></div>
</div>
<div class="row">
<div class="col-sm-6"><h7>© 2016 COPYRIGHT LINE</h7></div>
</div>
</div>
</div>
</footer>
This is my CSS for this section:
footer {
height: 60px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
footer.a{
display:inline-block;
margin:0 auto 0 auto;
}
h7{
color:#FFF;
font-size:24px;
font-family: 'Contrail One', cursive;
text-align:center;
}
I can't seem to figure this out, I've drawn it out on a couple sheets of paper, but I can seem to style like like I'd like. Can anyone point out where I'm going wrong?
After trying your the posted code I found that you are using wrong quote pair.
Also the css you gave isn't designed to achieve the goal.
I made a working fiddle here. Check it out
HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 parent">
<p>GET SOCIAL WITH US!</p>
<div class="icon">
<img src="https://myapnea.org/assets/myapnea/icons/facebook_icon-7eedcb8837293505e1d3b1494ff19c9c3842340d1dfcd193e098e2b44f34456b.png" alt="Follow us on Facebook">
<img src="http://frcgamesense.com/dnn/portals/0/Home/Twitter_icon.png" alt="Follow us on Twitter">
<img src="https://store-images.s-microsoft.com/image/apps.36749.9007199266245564.6701eae8-16d2-4ba0-bdaa-8d9d9f9a1e70.03e5f6a9-3866-4ad9-9f2b-6b57ff90419e?w=100&h=100&q=60" alt="Link In with Us"></div>
</div>
<div class="col-md-6">
<p class="copyright">© 2016 COPYRIGHT LINE</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
padding: 5px;
height: 100px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
.copyright {
padding-top: 40px;
}
footer p {
color: #fff;
}
footer a img {
display: inline-block;
width:50px;
}
.parent .icon {
margin: auto 7px;
}
It looks like your second col-sm-6 is nested too deep. It should be at the same level of the other one, not within it. Your divs are all sitting on half the grid (6 wide) and then the three social logos are taking half of that, and the copyright bit is taking the other half. You need the col-sm-6 divs to be siblings.
Furthermore, I don't think col-sm-6 looks like it'll work, looking at what you're trying to achieve. You might want to make the first group col-sm-3 or so and add an offset class to the copyright part. :-)
There are at least 3 errors in your HTML markup:
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
The ending quote should be double ("), not single (')
Since you place it in a column, the class name of this tag should be container-fluid, not container
</div>
<div class="row">
<div class="col-sm-6">
Missing close tag, the div .row is not neccessary.
</div>
</div>
</div>
<div class="col-sm-6">
Please see the fixed code here
What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:
<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
<div style="float:left; padding-right:30px; width:20%">
PHOTO
</div>
<div style="float:left; width:70%">
TEXT SECTION
</div>
</div>
Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s
.panel { width:100%; padding-bottom:30px; overflow: hidden }
.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
<strong>Name1</strong>
<div class="panel">
<div class="photo">
PHOTO
</div>
<div class="text">
TEXT SECTION
</div>
</div>
HTML
<div class="pick_group">
<h2>Name 1</h2>
<img class="photo" />
<p class="text"></p>
</div>
<div class="pick_group">
<h2>Name 2</h2>
<img class="photo" />
<p class="text"></p>
</div>
The CSS
place this in between just before the
.pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}
.pick_group h2{
style if you want
}
.photo {
width: 200px;
float: left;
margin: 10px 25px;
}
.text {
width: 500px;
float: left;
margin: 10px 25px;
}