I have a client who wants a particular design on their home page to match what is seen on their magazine cover. The basic stairstep design of the cover never changes but occasionally the images do. I have not been able to devise a way to cover this format without using 1 large image.
Here's a fiddle: http://jsfiddle.net/z6ghY/
Note: The appearance in this fiddle is correct in how the client wants it to be seen. My problem is that it uses one large image that must be changed occasionally. It would be much easier if these three images were separated.
Anyone know the best way I can achieve this? The images can be placed via HTML or CSS, either way does not matter, though it would be nice to see them in the HTML for SEO benefits.
In case the fiddle doesn't display the image here it is.. http://i.imgur.com/6s2i9L7.png
HTML:
<h2>Innovative Engineering Solutions in Material Handling</h2>
<div class="home-container">
<div class="home-content"><p>Experience the impact that Lauyans & Company can make on your business success. Through innovative engineering solutions in material handling, Lauyans will take responsibility for the planning, execution and acceptance of your project.</p>
<!--h2>Lauyans... why choose anyone else?</h2-->
<h2 style="margin: 80px 0 0 30px;">Lauyans...<br /> why choose<br /> anyone else?</h2>
</div><!-- END HOME CONTENT -->
</div><!-- END HOME CONTAINER -->
<div class="home-container2">
<div class="home-planning">
<h3>Planning</h3>
</div>
<div class="home-execution">
<h3>Execution</h3>
</div>
<div class="home-acceptance">
<h3>Acceptance</h3>
</div>
</div>
CSS:
.home-container { width: 690px; height: 459px; background: url('/wp-content/uploads/2013/01/home-image.png') 50% 100% no-repeat; }
.home-container2 { width: 690px; }
.home-content { width: 430px; height: 429px; padding: 15px; }
.home-content p { padding: 0; margin: 0; }
.home-content h2 { padding-top: 10px; margin: 0; }
.home-container2 h3 { padding-top: 0px; margin: 0; text-align: center; }
.home-planning { width: 230px; float: left; }
.home-execution { width: 230px; float: left; }
.home-acceptance { width: 230px; float: left; }
I would take the absolute positioning route considering the "unique" layout you are going for:
http://jsfiddle.net/z6ghY/1/
I reworked everything (including the images which I had to grab from somewhere else):
HTML
<div class="home_con">
<h2 class="pge_title">Innovative Kitten Solutions</h2>
<div class="home_step">
<h2 class="step-title">Lauyans...<br /> why choose<br /> anyone else?</h2>
<p>
Experience the impact that Kittens can make on your business success through
purring.
</p>
<img class="img1" src="http://www.vivapets.com/img/album/52/19052_white_persian_kittens_for_adoption_thb.jpg" />
<img class="img2" src="http://www.saudivets.com/images/Vpic20.jpg" />
<img class="img3" src="http://fc04.deviantart.net/fs70/f/2011/167/2/8/kitten_tracks_banner_100x300_by_xxjessie_kittehxx-d3j2h51.png" />
</div>
<div class="img_text">
<div class="img_text_ele">Planning</div>
<div class="img_text_ele">Execution</div>
<div class="img_text_ele">Acceptance</div>
</div>
</div>
CSS
.home_con h2.pge_title { font-weight:bold; font-size:1.125em; }
.home_step { width:300px; height:300px; position:relative; }
.home_step h2.step-title { position:absolute; top:110px; left:10px; }
.home_step p { width:200px; position:absolute; top:10px; left:10px; }
.home_step img { position:absolute; bottom:0px; }
.home_step .img1 { left;0px; }
.home_step .img2 { left:100px; }
.home_step .img3 { left:200px; }
.home_con .img_text { width:300px; overflow:hidden; }
.home_con .img_text_ele { width:100px; float:left; text-align:center; }
This way would need the images to be chopped up a bit but it would work if that was cool to do:
http://jsfiddle.net/5qfLj/1/
HTML:
<div class="container">
<div class="row">
<div class="span2">1</div>
<div class="span1" style="background:#ccc;">2</div>
</div>
<div class="row">
<div class="span1">3</div>
<div class="span1" style="background:#666;">4</div>
<div class="span1" style="background:#ccc;"></div>
</div>
<div class="row">
<div class="span1" style="background:#999;">5</div>
<div class="span1" style="background:#666;">6</div>
<div class="span1" style="background:#ccc;">7</div>
</div>
</div>
CSS:
.container {
width:600px;
}
.row {
overflow: hidden;
}
.span1 {
float:left;
width:200px;
height:200px;
}
.span2 {
width:400px;
height:200px;
float:left;
}
Related
This is my attempt but the div wrapper doesn't center the content div.
I have a div containing ang box shape with another div with texts.
.wrapper {
position:absolute;
left: 50%;
}
.content {
width:90%;
text-align:justify;
left: -50%;
display: inline-block;
}
.button {
text-align:center;
}
<div class="wrapper">
<div name="box" style="background-color:#FF6201;width:220px;height:220px;:30px">
<div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
weee</button>
</div>
</div>
</div>
I can actually do on html by adding tags but i am hoping to make this done in css. pls help.
I found this nifty trick a while back:
margin-left: 50%;
transform: translate(-50%)
This will center any statically positioned Div. I am assuming that you want the box centered; if so I would move the class="content" to that element and then revise your css to the following:
.content {
width:90%;
margin-left: 50%;
text-align:justify;
transform: translate(-50%)
}
Here is a fiddle link to see if this is what you were going for: https://jsfiddle.net/e3tsj8qf/5/
Edit:
Code from fiddle referenced below (accepted as answer):
.box {
background-color:#FF6201;
width:220px;
height:220px;
}
.content {
width:90%;
text-align:justify;
margin-left: 5%;
}
.centered {
text-align:center;
}
<div class="box" name="box">
<div class="content">
Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,
</div>
<div class="centered">
<button class="button">weee</button>
</div>
</div>
Try this code markup and style.....
*{box-sizing:border-box};
*{margin:0;padding:0}
.wrapper {
position: absolute;
left: 50%;
transform:translate(-50%);
}
.content {
width: 85%;
text-align: center;
display: block;
margin:0 auto;
}
.button {
text-align: center;
}
<div class="wrapper">
<div name="box" style="background-color:#FF6201;width:220px;height:220px;">
<div class="content">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting,<button class="button">
weee</button>
</div>
</div>
</div>
I'm working on a project and I got to a place where I decided to realized a collage.
I have done the collage already and it is here: Fiddle
But I would like to do the same thing without using the property float on the elements of div1.
If possible, I would like to use only the properties right and left on the element of div1 without reducing the size of the elements of that div.
Sorry I'm not a native English speaker, I'm trying my best.
Hopefully, you would like to see something like this:
body {
width: 380px;
margin: 0 auto;
}
.div1{
text-align:justify;
}
.div1:after {
content: "";
display: inline-block;
width: 100%;
}
.div1 span img{
width:45%;
}
<div class="div1">
<span><img src="https://picsum.photos/189/324?random=1" alt="rd1"/></span>
<span><img src="https://picsum.photos/189/324?random=2" alt="rd2"/></span>
</div>
<div class="div2">
<img src="https://picsum.photos/380/325?random=3" alt="rd3"/>
</div>
My comment: I have set an 'img' width value to 45%, but you could set it to any value which will be equal or less than 50%. By the way, I suggest you to use tag 'span' instead of 'p' because 'span' ,in my opinion, is more suitable for this purpose. If you will use my approach you will be able to add any number of images to parent 'div' tag. For example, if you will add any number of images and their total width will be equal or less than 100%, these images are will be placed evenly on row.
This is what you asked for. But I recommend not to go with this approach. Extending it will be a nightmare. If image sizes change then it will be impossible to fix with with just CSS.
body {
width: 380px;
margin: 0 auto;
}
.div1{
position:relative;
height:324px;
}
.div1 p {
margin-bottom: 0;
margin-top: 0;
width:50%;
position:absolute;
}
.div1 p:first-child {
left:0px;
}
.div1 p:last-child {
left:50%;
}
<div class="div1">
<p><img src="http://lorempixel.com/189/324/" alt=""/></p>
<p><img src="http://lorempixel.com/189/324/" alt=""/></p>
</div>
<div class="div2">
<img src="http://lorempixel.com/380/325/" alt=""/>
</div>
you can use display: flex; like that you dont have to use float
body {
/* width: 520px;*/
margin: 0 auto;
}
/*.div1 p {
margin-bottom: 0;
margin-top: 0;
}*/
.div1 {
display:flex;
justify-content:center;
}
.div2{
display:flex;
justify-content:center;
}
<div class="div1">
<img src="http://lorempixel.com/189/324/" alt=""/>
<img src="http://lorempixel.com/189/324/" alt=""/>
</div>
<div class="div2">
<img src="http://lorempixel.com/380/325/" alt=""/>
</div>
you mean something like this?
.div1 {
left: 0;
right: 0;
text-align: center;
margin: auto;
}
.div2 {
left: 0;
right: 0;
text-align: center;
margin: auto;
}
<div class="div1">
<img src="http://lorempixel.com/189/324/" alt=""/>
<img src="http://lorempixel.com/189/324/" alt=""/>
</div>
<div class="div2">
<img src="http://lorempixel.com/380/325/" alt=""/>
</div>
I am currently creating a PHP based Website which needs to list the Programmes... I tried creating a custom CSS code by myself, tried breaking templates to get the CSS. But everything failed. So could somebody help me get the CSS code for a div which look like the one given below
I would add the classes for buttons and other icons by myselves. I just want the div which is also reponsive. I am not much expert in CSS. I only want the alignment. Not the fancy elements inside it.
I have made fiddle here please check this out, hope you can edit the fiddle based on your needs
HTML
<div class='customHeight'>
<div class='row'>
<div class='col-sm-6 custom'>
<div class='dateHolder'>27 Nov</div>
</div>
<div class='col-sm-6'>
<div class='row '>
<h3>Some title goes here</h3>
</div>
<div class="row bottomGap">location / date goes here</div>
<div class="row bottomGap">Content goes here Content goes here
Content goes here Content goes here Content goes here Content goes
here Content goes here Content goes here Content goes here</div>
<div class='row'>
<button class="btn btn-default">
Buy Tickets
<button>
<button class="btn btn-danger">
Buy Tickets
<button>
</div>
</div>
</div>
CSS :
*
.bottomGap{
margin-bottom:5px;
}
.custom {
background-color: #ccc;
height:200px;
}
.customHeight{
height:200px;
}
.dateHolder{
height:80px;
width:50px;
background-color:#000;
padding-top:10px;
padding-left:10px;
}
*
How about something like this:
* { box-sizing: border-box }
.c {
height: 150px;
width: 500px;
background-color:#eee;
margin: 5px;
padding: 10px;
}
.c:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.c > div {
padding: 5px;
height:100%;
}
.c > div:first-child {
float:left;
width: 30%;
background-color:#aaa;
margin:0 0 0 0;
}
.c > div:last-child {
float:left;
width: 70%;
background-color:#ddd;
}
<div class="c">
<div>left</div>
<div>right</div>
</div>
Why wont my divs float? Content1 and Content2 should sit side by side. What am I missing? I am sure that it is something simple. i am obviously very early on in this project, so no need to correct all the other crap :).
Here is my css:
body {
margin: 0;
background-color: #cccccc;
}
#header {
width: 100%;
height:90px;
background-color: #999999;
}
#container {
margin-right: 20%;
margin-left: 20%;
width: 1000px;
}
#content1 {
width: 300px;
float: left;
}
#content2 {
width: 405px;
float: left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:90px;
background-color: #999999;
}
Here is my html:
<div id="header">
My Personal Page
</div>
<div id="container">
<div id="Content1">
<img src="http://localhost:8888/portrait.png" height="400">
</div>
<div id="Content2">
<img src="http://localhost:8888/portrait.png" height="400">
</div>
</div>
<div id="footer">
Copyright Information
</div>
Because you wrote your id's wrong. The name of the ID must be excactly the same as the name in your css sheet. In html you have Content1 with an uppercase C while in your css you have content1 with a lowercase c. This same scenario you have with Content2(html) and content2(css).
Your html: (Wrong)
<div id="Content1"> && <div id="Content2">
New html: (Right)
<div id="content1"> && <div id="content2">
DEMO
I'm trying to make this kind of responsive design with CSS.
It basically should be 600px width when there's enough space to show whole length.
When not, it folds, then right partial come appears on the bottom of left partial.
I'm struggling how to archive this.
This is DEMO that I could go this far
http://jsfiddle.net/a7Fkj/5/
HTML
<div class="table_row">
<div class="left_partial">
<div class="StoreName">Walmart Store</div>
<div class="Location">Located in California</div>
</div>
<div class="right_partial">
<div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg"><div>
<div class="person1">John Smith<div>
<div class="person2">Mike Tailor<div>
<div class="person3">Jessica Swan<div>
</div>
</div>
CSS
div.table_row{
min-width: 300px;
margin-bottom: 30px;
}
div.left_partial{
width: 300px;
}
div.right_partial{
width: 300px;
}
div.StoreName{
background-color: #000000;
color: #FFFFFF;
}
div.Location{
}
div.store_icon{
width: 60px;
height: 60px;
}
div.person1{
}
div.person2{
}
div.person3{
}
You don't need media queries for this design- you can use inline-block to collapse the layout when the browser is resized.
HTML:
<div class="table_row">
<div class="left_partial">
<div class="StoreName">Walmart Store</div>
<div class="Location">Located in California</div>
</div>
<div class="right_partial">
<div class="store_icon"><img src="https://twimg0-a.akamaihd.net/profile_images/616833885/walmart_logo_youtube.jpg" /></div>
<div class="people">
<div class="person">John Smith</div>
<div class="person">Mike Tailor</div>
<div class="person">Jessica Swan</div>
</div>
</div>
</div>
CSS:
div.table_row{
min-width: 300px;
margin-bottom: 30px;
}
div.left_partial{
width: 300px;
display:inline-block;
vertical-align:top;
}
div.right_partial{
width: 300px;
display:inline-block;
vertical-align:top;
margin-bottom:30px;
}
div.StoreName{
background-color: #000000;
color: #FFFFFF;
}
div.Location{
}
div.store_icon{
width: 60px;
height: 60px;
display:inline-block;
vertical-align:top;
}
div.store_icon img{
width:100%;
height:100%;
}
div.people{
display:inline-block;
vertical-align:top;
height:60px;
width:234px;
}
jsfiddle: http://jsfiddle.net/kmMEM/
This will collapse the design when the browser is resized- I added a 30px bottom margin to your right_partial to ensure the list stacks correctly.