I would like to find out how can i repeat div till | centered div | and repeat div again (like a table). As i understand, i have to use responsive condition, but i have no idea how can i use it.
here is my code sample (HTML):
<!-- Slider -->
<div id="slider">
<div class="big"><img class="opt" src="images/urban1.jpg" width="930" height="367" alt="big_thumb"></div>
<div id="wrap">
<div class="line"></div>
<div id="thumbs">
<div id="button_left"></div>
</div>
<div class="line"></div>
</div>
</div>
CSS:
#slider #wrap {
width: 100%;
height: 87px;
border: 1px #666 solid;
}
#slider #wrap .line {
background:url(../images/dotted_line.png) top repeat-x;
width: ??;
height: 15px;
float: left;
}
#slider #wrap #thumbs {
width: 940px;
height: 87px;
margin: 0px auto;
border: 1px #000 solid;
}
Thanks for help.
Related
in my HTML code, I have some rows and div, but one div is shown before another, even if in the code is after. Div with class "contact" is shown before div with class "photos"
Photo: https://imgur.com/a/Y8BGQIM
<div class="photos">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Galerie Foto</div>
</div>
<div class="gallery">
<img src="background1.jpeg" alt="Cinque Terre">
</div>
<div class="gallery">
<img src="galerie1.jfif" alt="Forest">
</div>
<div class="gallery">
<img src="galerie2.jfif" alt="Northern Lights">
</div>
<div class="gallery">
<img src="galerie3.jfif" alt="Mountains">
</div>
</div>
<div class="contact">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 section-heading">Contact</div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6 section-subheading">
<h1><br>
<br>
</h1>
</div>
</div>
</div>
And the css code that I applied to the divs:
.photos{
width: 100%;
position: absolute;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
position: absolute;
background-color: black;
}
Hope deleting or commenting position: absolute in both the places will give you expected result.
Give a try. to below CSS
.photos{
width: 100%;
background-color: black;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
}
Position absolute will position both divs on top of one another at the top of the page if no other styling positions then differently. Remove the position absolute it is not needed here and add a float left to your photos class and your contact class so that the divs fall in order under one another because your gallery has a float left set.
.photos{
width: 100%;
float:left;
background-color: green;
}
div.gallery {
border: 1px solid #ccc;
float: left;
}
.section-subheading:hover {
border: 5px solid #d3ae87;
}
div.gallery img {
width: 400px;
height: 400px;}
.contact{
width: 100%;
background-color: black;
float:left;
}
The image element can be centered levelly with margin:0px 50px 0px 50px;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0px 50px 0px 50px;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You miss display:block
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
.img1 {
margin: 0 auto;
display: block
}
<div class="wrapper">
<img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
I'm sure there are better / more efficient ways of doing this. but...
This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.
body {
text-align: center;
margin: 0 auto;
}
.my-image-parent {
margin:1em auto;
width: 350px;
max-width:100%;
height: 200px;
line-height: 200px; /* should match your div height */
text-align: center;
font-size: 0;
background: #131418;
}
/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<h4>Works for square, landsacape and portrait images.</h4>
<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
display: block;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You can also add text-align: center; for the outer wrapper to center the image.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
Edit:
Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.
Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
I am trying to place two div side be side but I am not able to. I have done google and previous stackoverflow search about same problem and tried to use those but it didn't work for me.
Here is my source:
HTML:
<section id="controls" class="body">
<div id="TM" class="body">
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
</div>
<div id="wrapper" class="body">
<div id="BL" class="body"></div>
<div id="BR" class="body"></div>
</div>
</section><!-- /#controls -->
<section id="extras" class="body">
<div class="blogroll">
</div><!-- /.blogroll -->
<div class="social">
</div><!-- /.social -->
</section><!-- /#controls -->
CSS:
#controls { height: 600px; width: 800px }
#wrapper { width: 800px; height: 300px }
#TM { width:100%; border:1px solid black; height: 300px }
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:right; margin-top: 2px; margin-left: 2px; }
Here is output from current code:
You should decrease the width of #BL and #BR elements or remove margin-left. Your siblings take more than 100% of parent width. 100%+margins.
Use box-sizing: border-box
*{box-sizing: border-box}
#controls {
height: 600px;
width: 800px
}
#wrapper {
width: 800px;
height: 300px
}
#TM {
width: 100%;
border: 1px solid black;
height: 300px
}
#BL {
width: calc(50% - 2px);
border: 1px solid black;
height: 300px;
float: left;
margin-top: 2px;
}
#BR {
width: 50%;
border: 1px solid black;
height: 300px;
float: right;
margin-top: 2px;
}
<section id="controls" class="body">
<div id="TM" class="body">
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
</div>
<div id="wrapper" class="body">
<div id="BL" class="body"></div>
<div id="BR" class="body"></div>
</div>
</section>
<!-- /#controls -->
<section id="extras" class="body">
<div class="blogroll">
</div>
<!-- /.blogroll -->
<div class="social">
</div>
<!-- /.social -->
</section>
<!-- /#controls -->
Your problem is Float in css.
if you want to place two divs side by side you should style both of them same float.
#left_one{float:left}
#right_one{float:left}
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
To fit 2 DIVs side by side, Either they should be inlined block or floated blocks. In addition of that;
Container width = OuterWidth of Div1 + OuterWidth of Div2
OuterWidth of Div = margin-left + DIV's width + margin-right + 2 x border width
Since you have 1px border and 2px margin one side. You need to subtract them from the width of div.
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
So I have several div containers for my website, and they stack vertically as follows:
and I want it to look more like this:
My HTML looks like this:
<div id="main">
<div id="header">
</div>
<div id="content">
<div id="game" class="box">
<canvas data-processing-sources="hello-web.pde"></canvas>
</div>
<div id="desc_down"> <!-- Description and Downloads -->
<div id="desc" class="box"> <!-- Description -->
</div>
<div id="down"> <!-- Downloads -->
<div id="windows" class="box">
</div>
<div id="mac" class="box">
</div>
<div id="linux" class="box">
</div>
<div id="code" class="box">
</div>
<div id="info" class="box">
</div>
</div>
</div>
<div id="screenshots" class="box">
</div>
<div id="tech_about">
<div id="tech" class="box">
</div>
<div id="about" class="box">
</div>
</div>
</div>
</div>
<div>
and my CSS like this:
#main {
max-width: 1280px;
width: 90%;
margin: 0 auto;
background-color: #b0e0e6; /* all colours temp */
}
#header, #content, #game, #desc_down, #screenshots, #tech_about, #info {
width: 100%;
}
#desc {
width: 60%;
}
#down {
width: 40%;
}
#windows, #mac, #linux, #code {
width: 50%;
}
#about {
width: 45%;
}
#tech {
width: 50%;
}
.box {
background-color: #FFFFFF;
border: 5px solid;
border-color: #000000;
height: 200px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
The heights of these boxes can and will change. I want to know how to make my website look like how want it to. Thank you.
Make them all float:left or display:inline-block.
Or better use sth like Bootstrap Grid system
There are endless ways to position your content. Here is an example of what can be achieved using floats.
Have an example!
HTML
<div id="wrap">
<div id="header"></div>
<div id="paneOne"></div>
<div class="minPane"></div>
<div class="minPane"></div>
<div class="minPane"></div>
<div class="minPane"></div>
<div id="wideMinPane"></div>
<div id="afterMini"></div>
</div>
CSS
#wrap {
width: 800px;
margin: 0 auto;
}
#header {
height: 200px;
background: #F00;
}
#paneOne {
width: 400px;
height: 500px;
background: #000;
float: left;
}
.minPane {
float: left;
width: 198px;
height: 200px;
background: #FF0;
border: solid 1px #000;
}
#wideMinPane {
float: left;
background: #F00;
border: solid 1px #000;
height: 90px;
background: #FF0;
width: 398px;
}
#afterMini {
height: 300px;
background: #F00;
clear: left;
}
Its simple. Set the width of the container div (which encloses all these div blocks)to some value.
Then give float:left to all the inner divs.