I want to have three different layouts of my web page for different browser widths (i.e. desktop, tablet, phone).
In the tablet layout (between 768px and 991px of the browser) I should have three elements, two in the first row (thus each of them taking 6/12 of the browser width) and the a third in the second row (taking 12/12 of the browser width).
This is what I want:
What I want - IMAGE
But I have a problem with this layout:
I am not able to set the third element borders aligned with the left and right borders of first and second element, as you see.
This is what I have done:
What I have - IMAGE
Can you help me?
Note: I want the element '3' wide as '1'+'2' width only for tablet layouts! For other layouts I want what I already did, i.e same width for every element (1,2 or 3).
This is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="row">
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p1"> Chicken</p>
</div>
<div class="col-lg-4 col-md-6 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p2"> Beef</p>
</div>
<div class="col-lg-4 col-md-12 col-sd-12 anchor">
<p class="content"> In girum imus nocte et consimur igni.</p>
<p class="my-title" id="p3"> Sushi</p>
</div>
</div>
</body>
</html>
This is the css:
/* width and height will include border and padding */
* {
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
text-align: center;
}
/*Set an anchor for the container of p elements*/
div.anchor{
position: relative;
}
#p1{
background-color: yellow;
}
#p2{
background-color: #ff0000;
}
#p3{
background-color: #ffaabb;
}
/*.col-md-12 .content{
margin-right: 2.5%;
margin-left: 2.5%;
*/
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
margin-right: 5%;
margin-left: 5%;
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 0px;
right: 0px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
margin-right: 5%;/*inherit; 22.525px; inherit*/
margin-top: 16px;
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
/* Simple Responsive Framework. */
.row {
width: 100%;
}
/********** desktop devices only **********/
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
}
/********** Tablet devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 {
float: left;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-12 {
width: 100%;
/*margin-right: -5.5%;
margin-left: -2.8%;*/
}
}
/********** mobile devices only **********/
/* the floating is only defined inside the media queries.
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */
#media (max-width: 767px) {
.col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
float: left;
}
.col-sd-9 {
width: 74.99%;
}
.col-sd-10 {
width: 83.33%;
}
.col-sd-11 {
width: 91.66%;
}
.col-sd-12 {
width: 100%;
}
}
Thank you!
check this fiddle
div.anchor{
position: relative;
padding: 0 15px;
}
p.content{
border: 1px solid black;
background-color: #a3d3d3;
/*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
height: 150px;
/* margin-right: 5%;
margin-left: 5%; */
font-family: Helvetica;
color: white;
padding: 20px;
}
p.my-title{
position: absolute;
top: 16px;
right: 15px;
width: 80px;
height: 20px;
margin: 0px;
border: 1px solid black;
text-align: center;
/* margin-right: 5%;inherit; 22.525px; inherit
margin-top: 16px; */
/*margin-right: auto;
margin-left: auto;
font-family: Helvetica;*/
color: black;
}
EDITS:
removed margin left and right on p.content and p.my-title, added padding on div.anchor and top and right position on p.my-title
Related
http://codepen.io/kjohnson/pen/azBvaE
My friend and I are thinking of using that timeline in our website. But the problem is we've 5 sections that needs to be added to timeline, whereas the original timeline have only 3 sections.
I've tried to add two more sections to that code, but it's losing its shape and responsiveness.
Is it possible to extend that timeline and maintain its responsiveness?
HTML
<!-- STEPS -->
<section id="Steps" class="steps-section">
<h2 class="steps-header">
Responsive Semantic Timeline
</h2>
<div class="steps-timeline">
<div class="steps-one">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Semantic
</h3>
<p class="steps-description">
The timeline is created using negative margins and a top border.
</p>
</div>
<div class="steps-two">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Relative
</h3>
<p class="steps-description">
All elements are positioned realtive to the parent. No absolute positioning.
</p>
</div>
<div class="steps-three">
<img class="steps-img" src="http://placehold.it/50/3498DB/FFFFFF" alt="" />
<h3 class="steps-name">
Contained
</h3>
<p class="steps-description">
The timeline does not extend past the first and last elements.
</p>
</div>
</div><!-- /.steps-timeline -->
CSS
$outline-width: 0;
$break-point: 500px;
#import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lato;
}
$gray-base: #999999;
$brand-primary: #3498DB; //Zen Blue
.section-header {
color: $brand-primary;
font-weight: 400;
font-size: 1.4em;
}
.steps-header {
#extend .section-header;
margin-bottom: 20px;
text-align: center;
}
.steps-timeline {
outline: 1px dashed rgba(red, $outline-width);
#media screen and (max-width: $break-point) {
border-left: 2px solid $brand-primary;
margin-left: 25px;
}
#media screen and (min-width: $break-point) {
border-top: 2px solid $brand-primary;
padding-top: 20px;
margin-top: 40px;
margin-left: 16.65%;
margin-right: 16.65%;
}
&:after {
content: "";
display: table;
clear: both;
}
}
.steps-one,
.steps-two,
.steps-three {
outline: 1px dashed rgba(green, $outline-width);
#media screen and (max-width: $break-point) {
margin-left: -25px;
}
#media screen and (min-width: $break-point) {
float: left;
width: 33%;
margin-top: -50px;
}
}
.steps-one,
.steps-two {
#media screen and (max-width: $break-point) {
padding-bottom: 40px;
}
}
.steps-one {
#media screen and (min-width: $break-point) {
margin-left: -16.65%;
margin-right: 16.65%;
}
}
.steps-two {
}
.steps-three {
#media screen and (max-width: $break-point) {
margin-bottom: -100%;
}
#media screen and (min-width: $break-point) {
margin-left: 16.65%;
margin-right: -16.65%;
}
}
.steps-img {
display: block;
margin: auto;
width: 50px;
height: 50px;
border-radius: 50%;
#media screen and (max-width: $break-point) {
float: left;
margin-right: 20px;
}
}
.steps-name,
.steps-description {
margin: 0;
}
.steps-name {
#extend .section-header;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
.steps-description {
overflow: hidden;
#media screen and (min-width: $break-point) {
text-align: center;
}
}
If you a novice I'd recommend you LEARN first. Copy templates/snippets is good to save your time when you know what you are doing.
I found a perfect tutorial for you here
Just to emphasize that's my opinion, I hope it helps in a certain way..
EDIT: If still want to develop in that way here's a codepen snippet with a fully responsive horizontal timeline. Just have to put more <li> inside the <ul>
I have an image that will not allow me to resize it.
Here is the image on the responsinator site [a link] (http://www.responsinator.com/?url=http%3A%2F%2Fsandbox.kevinw.me%2Fwilliams%2Fshare.html)
I need it to match the image on here [a link] (http://www.responsinator.com/?url=sandbox.kevinw.me%2Fshare%2Fshare.html)
Here is the html There is a video linked as you can see.
<div id="iphone" class="image">
<!-- Start VideoLightBox.com BODY section -->
<div class="videogallery">
<a class="disabled" href="vdbplayer364e.swf?volume=100&url=video/instagram.mp4" title="Instagram"><img id="iphone" src="img/instagramiphonephone.jpg" class="image" /><span><a class="voverlay" href="vdbplayer.swf?volume=100&url=video/instagram.mp4" title="Instagram"><img id="play_button1" src="img/instagramplaybutton.png" class="image"></a></span></a>
<span class="videolb"><a class="videolb" href="http://videolightbox.com/">Video in Popup</a> by VideoLightBox.com v2.8m</span>
</div>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section -->
</div>
Here is my code
#iphone {
width: 256px;
margin-top: 111px;
margin-left: auto;
clear: none;
margin-right: auto;
float: none;
padding-top: 13.2%;
padding-left: 2.8%;
padding-right: 2.8%;
padding-bottom: 0%;
}
Use below CSS, I think this is use full for your image resize issue:
CSS
#media only screen and (max-width: 768px)
#iphone1 { /******share.css Line:1568***********/
max-width: 256px;
margin-top: 111px;
/* margin-left: -14% !important; */
clear: none;
margin-left: auto;
margin-right: auto;
float: none;
/* padding-top: 34.2%; */
/* padding-left: 2.8%; */
/* padding-right: 2.8%; */
/* padding-bottom: 0%; */
}
#media only screen and (max-width: 360px)
#iphone { /******share.css Line:2316***********/
height: 68%;
padding-top: 48.2%;
/* padding-left: 4.4%; */
/* padding-right: 9.4%; */
padding-bottom: 7.4%;
}
I am building a new homepage for our website. You can visit it here: http://www.bkd.com/new-test.htm
The problem I am having is when I added some responsive code to the Div containers it is making my 2nd line of images mess up. The last 2 blocks are going under the first ad. I am needing them to line up just like the first row of images.
Here is my HTML:
<div id="container5">
<div id="container2"><img src="/images/industries-hp.jpg" id="img1" height="243"></div>
<div id="container3"><img src="/images/services-hp.jpg" id="img1" height="243"></div>
<div id="container4"><img src="/images/thoughtware-hp.jpg"id="img1" height="243"></div>
</div>
<div id="container6">
<div id="container7"><img src="/images/client-success.jpg" id="img1" height="140"></div>
<div id="container8"><img src="/images/10-signs.jpg" id="img1" height="140"></div>
<div id="container9"><img src="/images/ad-small.jpg" id="img1" height="140"></div>
</div>
Here is my CSS:
/* Other page elements */
/* Show in default resolution screen*/
#container5 {
max-width: 970px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}
/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
#media only screen and (max-width: 479px){
#container5 { width: 90%; }
}
#container2 {
width: 310px;
float: left;
padding-top:10px;
padding-right:12px;
padding-bottom:5px;
}
#container3 {
width: 310px;
float: left;
padding-top:10px;
padding-right:12px;
padding-bottom:5px;
}
#container4 {
width: 310px;
float: left;
padding-top:10px;
padding-right:12px;
padding-bottom:5px;
}
#container6 {
max-width: 970px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}
/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */
#media only screen and (max-width: 479px){
#container6 { width: 90%; }
#container7 {
width: 310px;
float: left;
padding-top:10px;
padding-right:12px;
padding-bottom:5px;
}
#container8 {
width: 310px;
float: left;
padding-top:10px;
padding-right:12px;
padding-bottom:5px;
}
#container9 {
width: 310px;
float: left;
padding-top:10px;
padding-right:12px;
padding-bottom:5px;
}
#img1 {
max-width:100% !important;
max-height:100% !important;
display:block;
}
How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)