I am trying to create a website where there are four titles above four images and four descriptions below. For both the titles and descriptions, I have used/created two different tables. The images are placed accordingly using margins. The tables look good on my computer but when transferred to a larger screen they move to the left. I figured out that the way to make them compatable and look good on all larger screens would be to centre the tables. I have tried using align: centre for the table and including style="text-align: centre;" but neither have worked. How can I fix this problem. Thanks for any help in advance. It is greatly appreciated. Below is my current code:
.mobile_title {
margin-top: 25px;
font-size: 25px;
color: black;
margin-left: 105px;
font-family: 'Oswald', sans-serif;
}
.text_under {
font-size: 15px;
color: grey;
font-family: 'Oswald', sans-serif;
width: 150;
text-align: center;
}
.mobile {
margin-top: 30px;
margin-left: 160px;
}
.laptop {
margin-left: 140px;
margin-top: 45px;
}
.coding {
margin-left: 155px;
margin-top: 45px;
}
.database {
margin-left: 150px;
margin-top: 45px;
}
.load {
border-collapse: separate;
border-spacing: 130px 10px;
}
.kbg {
border-collapse: separate;
border-spacing: 155px 10px;
}
<body>
<table class="load">
<tr>
<td class="mobile_title">Mobile Development</td>
<td class="mobile_title">Web Development</td>
<td class="mobile_title">Backend Development</td>
<td class="mobile_title">Database Creation</td>
</tr>
</table>
<img src="mobile.png" width=160 height=120 class="mobile">
<img src="laptop.png" width=150 height=100 class="laptop">
<img src="coding.png" width=150 height=100 class="coding">
<img src="database.png" width=150 height=110 class="database">
<table class="kbg">
<tr>
<td class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.</td>
<td class="text_under">The creation of web-based sites using multiple programming languages including HTML, CSS, and Custom word press. These websites, after the creation stages, are hosted online for all to observe.</td>
<td class="text_under">The process and supporting information that websites need in order to perform wanted tasks. The information is written in codes, the process called programming.</td>
<td class="text_under">The location of storage of all of the supporting information. This also saves all important files including the back ends of developing websites and/or mobile applications.</td>
</tr>
</table>
</body>
as per my comment, using flexbox it is easier than tables.
.load-wrap {
display: flex;
flex-wrap: wrap;
text-align: center;
font-family: 'Oswald', sans-serif;
/*to center - optional */
width: 75%;
margin: auto
}
.load {
flex: 1;
padding: 20px;
box-sizing:border-box
}
.mobile_title {
margin-top: 25px;
font-size: 25px;
color: black;
}
.text_under {
font-size: 15px;
color: grey;
}
.mobile {
margin-top: 30px;
}
<div class="load-wrap">
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
<div class="load">
<div class="mobile_title">Mobile Development</div>
<img src="//placehold.it/160x120" class="mobile">
<div class="text_under">The creation of applications for iOS and Android devices. This also includes the mobile optimization of websites, making them responsive on all devices.
</div>
</div>
</div>
Put your images in new row with each image in separated column, also do that for description text. And to center images use:
td img{
display: block;
margin-left: auto;
margin-right: auto;
}
For centering text add:
text-align: center;
In your .load class.
Here is your JSFiddle: https://jsfiddle.net/9c1p3fm6/
Edit: And yes, you need to delete all classes you attached to img elements.
Related
I want to display my "third_div" as a block in mobile and inline on a desktop but my media query isn't working . I have attached two pictures that show what I want to achieve .how can I fix it ?.
picture one
picture two
<h2 style="text-align: center;font-size: 25px;font-family: Arial, Helvetica, sans-serif;line-height: 1.3;
margin-bottom: 18px;
font-weight: 400;"><strong>Premium Transportation Servicing The Dominican Republic</strong></h2>
<p style="text-align: center;">Transekur is the only company in the Dominican Republic dedicated exclusively to providing premium transportation and airport transfers in private, luxurious vehicles. No matter how big or small your vacation party, we have the transportation to fit your needs.</p>
<div style="width: 100%; background-color: white; border: 1px solid grey; height:100%;">
<div id="first_div" style="width: 100%; background-color: #ca7a09;">
<h2 style="text-align: center; color: white; padding-top: 5%;font-size: 36px;">The benefits of using Transekur</h2>
<div style="display: flex; display: -webkit-flex; overflow: auto;">
<div class="first_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto; padding-top: 12%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/wifi.png" />
<h3 style="text-align: center; color: white;padding-top: 3%;padding-left:2%;">FREE Wi-Fi service</h3>
<p style="text-align: center; color: white;padding-top: 15%;padding-left:2%;">All of our modern luxury vehicles come equipped with mobile hotspot Wi-Fi service, so that you always have internet on the go.
</p>
</div>
<div class="second_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/phone-1.png" />
<h3 style="text-align: center; color: white; padding-top: 16%;">FREE Phone Service</h3>
<p style="text-align: center; color: white;padding-left:2%;padding-top: 1%;">A mobile phone with unlimited calls within the Dominican Republic, the United States, Puerto Rico and Canada is provided free of charge for our clients during the rental period</p>
</div>
<div class="thirdt_image" style="width: 25%;"><img style="display: block; margin-left: auto; margin-right: auto;padding-top: 15%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/car-1.png" />
<h3 style="text-align: center; color: white; padding-top: 1%;">New Vehicles</h3>
<p style="text-align: center; color: white; padding-top: 15%;padding-left:2%;"> Transekur Premium Transport’s fleet of modern luxury SUV’s and limo buses come with leather interior, tinted windows, WiFi service, and cold beverages. These come standard in all of our vehicles.</p>
</div>
<div class="fourth_image" style="width: 25%;">
<img style="display: block; margin-left: auto; margin-right: auto; padding-top: 5%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/driver.png" />
<h3 style="text-align: center; color: white; padding-top: 11%;">Bilingual Drivers</h3>
<p style="text-align: center; color: white; padding-top: 13%;padding-right:5%">We are excellent communicators. If English is not your primary language, our drivers also speak French, German, Italian, Portuguese, and Spanish.</p>
</div>
</div>
<!-- End of the first iner div flex div -->
</div>
<!-- End of the first div -->
<div id="second_div" style="width: 100%; background-color: white; display: flex; display: -webkit-flex;height:100%;">
<div style="width: 50%;">
<p style="text-align: center;">Visited October 2016</p>
<img style="display: block; margin-left: auto; margin-right: auto; border-radius: 50%;" src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/avatar030-1.jpg" />
<h2 style="text-align: center; color: gray;">Yezabel D</h2>
</div>
<div style="width: 50%;">
"The best service there is, at a price you can’t resist."
<p style="margin-left: auto; margin-right: auto; padding-right: 10%;">I want to let you know how much my husband and I enjoyed our trips with Transekur. We used your service for trips to the Punta Cana airport. Very nice. Both of your drivers were on time and very courteous. We had used other services when we traveled to the Dominican before, needless to say yours is superior. Thank you for a trouble free ride to and from the airport, we will highly recommend your service to family and friends!</p>
</div>
</div>
<!-- End of the second first div -->
<div id="third_div" style="width: 100%; background-color: #363636;display:inline-block">
<style>#media only screen
and (min-device-width: 320px) {
#third_div{
display:block;
}
}</style>
<img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/03/logo_transekur.png"/>
<h2 style="color:white;padding-left:50%;padding-top:2%;">Book Transport With Us Today!<h2>
<p>1-888-885-8708</p>
<p><img src="http://transekur.seobrandserver.com/wp-content/uploads/2016/10/testgif.gif" style="width: 48px;
height:24px;" /></p>
</div>
</div>
For media queries I would suggest taking a mobile-first approach. So set display:block; as the default styling and then only change it to display:inline-block; once the window is equal to or greater than 320px(added some spans to show that it's working):
#third_div {
display:block;
width:100%;
background-color:#363636;
color:white;
}
.mobile {
display:block;
}
.desktop {
display:none;
}
#media only screen and (min-width:320px) {
#third_div {
display:inline-block;
color:red;
}
.mobile {
display:none;
}
.desktop {
display:block;
}
}
<div id="third_div"><span class="desktop">DESKTOP</div><span class="mobile">MOBILE</div></div>
Not sure if you are making an e-blast or what, but I would advise against using inline styling as well. Using external CSS is a lot cleaner and easy to manage.
Use following code:
For desktop:
#third_div {
display: inline-block;
}
For mobile:
#media only screen and (min-width:320px) and (max-width:767px) {
#third_div {
display: block;
}
}
Or, Alternative solution
For mobile
#third_div {
display: block;
}
For desktop
#media only screen and (min-width: 1024px) {
#third_div {
display: inline-block;
}
}
I am trying to get my "more" links to all line up straight. I was wondering if I should make a separate div for them? Otherwise I don't really know what to do. I'm new at this so do not judge too harshly. Thank You! I added a jsfiddle but I know that I didn't properly do it...I hope you can just look at the code though. I'll add a picture of what I'm having problems with: https://jsfiddle.net/uxnLsxxk/
<div class="box1">
<div class="column-left">
<h2> Content</h2>
You can use good'old tables too
<table width="100%">
<tr>
<td>
<table width="100%">
<tr>
<td>
<h2> Content</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Objectives</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td>
<h2> Project</h2>
</td>
</tr>
<tr>
<td>
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources</p>
</td>
</tr>
<tr>
<td>
<a id="button1" href="about.css">More</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Check the output in Jsbin
#media only screen and (min-width: 961px) {
/*-----CONTENT -----*/
figure.adjustable {
width: 29%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
font-family: 'Arapey', serif;
/*font-family: 'Courier New', sans-serif;*/
font-weight: 300;
font-size: 20px;
}
header {
position: fixed;
z-index: 1000;
width: 100%;
top: 0px;
text: black;
background-color:#670809;
height:70px;
text-align: center;
letter-spacing:1px;
line-height: 55px;
}
header, h1, h2{
font-family: 'Yatra One', cursive;
}
nav ul li a {
display:inline-block;
text-align: center;
padding: 1 px;
color: #fff;
letter-spacing: 1 px;
text-decoration:none;
text-transform: uppercase;
margin: .55em;
font-size: 5 px;
float: right;
}
nav ul li.active a {
/*background-color: none;*/
color: white;
}
nav ul li a:hover {
/*background-color:none;*/
color: white;
}
nav ul li a:visited {
color:white;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
margin: 5px;
}
h2{
text-align: center;
color:#670809;
font-size: 30px;
margin: 5px;
}
p{
text-align: center;
}
.column-left{
float: left;
width: 30%;
padding: 1%;
}
.column-right{
float: right;
width: 30%;
padding: 1%;
}
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
}
section{
text-align: center;
width: 100%;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
height: 50px;
background-color:#670809;
font-family: 'Yatra One', cursive;
/* text */
padding-left: 10px;
padding-top: 10px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:hover, a:active, a:visited { color: white; }
.box1{
border-width:thick;
border-style:solid;
border-color:#287EC7;
}
#button1{
color:black;
float: left;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button2{
color:black;
display: inline-block;
width: 30%;
padding: 1%;
font-weight:bold;
}
#button3{
float: right;
width: 30%;
padding: 1%;
color:black;
font-weight:bold;
}
.more{
position:relative;
left:-120px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
Home
About
Contact
MSUM
</header>
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
</figure>
<object type="image/svg+xml" data="newsvg.svg" ></object>
<div class="video-txt" ></div>
<section>
<section>
<h1> GCOM 366 Overview</h1>
<div class="box1">
<div class="column-left">
<h2> Content</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p>GCOM 366 is designed to teach intermediate web design. Building on the beginning
skills you’ve mastered in GCOM266, you will learn the current development tools
commonly used in front end web development. Subjects will include web hosting,
text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX,
and Forms. You will learn through lectures, demonstrations, reading assignments,
and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
<br>
<!-- <a id="button1" href="about.css">More</a>-->
</p>
</div>
<br>
<div class="column-center">
<h2>Objectives</h2>
<img class="img" src="techpic1.jpg" alt="html code" width="200" height="200" />
<p>Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities.
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.
<br>
<!--<a id="button2" href="contact.css">More</a>-->
</p>
</div>
<div class="column-right">
<h2> Project</h2>
<img class="img" src="techpic2.jpg" alt="keyboard" width="200" height="200" />
<p>The course centers around weekly projects that will feed into the development of a
final project. A website must a have a clear purpose and established brand students will develop their plan for this, and execute it with skills learned in the class.
The website must be well organized, competitively designed, and skillfully coded
<br>
<a id="button3" href="msum.css" class="more">More</a>
</p>
</div>
</section>
</div>
<footer>
</footer>
</body></html>
</body>
</html>
This code should do it.
HTML
<div class="text-container">
<p class="overview-text">
... your text ...
</p>
<div class="more-link">
More
</div>
</div>
CSS
.overview-text, .more-link {
text-align: center;
}
Place the HTML after the img tags.
Set min-height for overview-text class. And i hope it will fix your issue. for example
CSS:
.overview-text{
min-height: 200px
}
I am having trouble figuring out the proper CSS for this page. I would like to maintain a responsive design so that images will re-size for the container they are in. If you look at this JSFiddle in Chrome and Safari it works fine. The images do not resize in FireFox or IE 11. The larger full images do not show on an iPad or iPhone at all. I'm not sure where to turn to next.
Here's the HTML
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_top">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-01.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h1 class="colab_text_padding">About Chiara Debenedetti</h1>
<p class="colab_text_padding">Chiara Debenedetti was born in Italy in 1982 and graduated from the European Design Institute of Milan in 2003. She founded Harta Design in 2011 and specializes in packaging, logos and corporate identity for luxury brands in the fashion, fragrance
and food and beverage industries.</p>
<p class="colab_text_padding">“Design for me is going beyond the visual form in order to develop the material aspect. We have five senses, but we often forget about touch. And yet this is the sense that allows us to first interact with the reality that surrounds us: the mother-daughter
relationship comes to mind. In my daily work as a designer, whether I am dealing with graphics or home décor objects, I always pay particular attention to the materials. My studio has become a depository of paper and textiles. With Bloomx, I aimed
to highlight the X-factor of felt: its feeling of warmth to the touch together with the lightness of the shapes that one can create at will.” </p>
</div>
</div>
<div class="colab_page_block_full colab_margin_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-02.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_full colab_margin_bottom">
<div class="colab_page_block_half colab_page_block_left colab_bottom">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-03.jpg" alt="" class="colab_image colab_bottom">
</div>
<div class="colab_page_block_half colab_page_block_right">
<h2 class="colab_text_padding">About Bloomx</h2>
<p class="colab_text_padding colab_margin_bottom">Bloomx is a modular product that marries design and mathematics while providing strong graphic patterning through the play of positive and negative space. The exponent ‘ x’ (best known as ‘ power’ ) represents the infinite solutions in quantity, colors,
and shape. By pairing the single module—a clean essential shaped 6 petals flower—with header options, Bloomx can provide soft and textural space separation as flexible room dividers. 63 colors of 100% Wool Design Felt can be configured in limitless
ways and the product can grow or shrink as needed by adding or removing modules. Plus, the product can be quickly and easily reconfigured in the future as needs or tastes change.</p>
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-04.jpg" alt="" class="colab_image colab_bottom">
</div>
</div>
<div class="colab_page_block_full">
<img src="https://www.filzfelt.com/images/pages/collaborators-chiara-assets/chiara-debenedetti-05.jpg" alt="" class="colab_image colab_bottom">
</div>
And here's the CSS that I have so far.
.colab_page_block p {
margin: 0;
font-style: normal;
font-weight: normal;
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #585858;
margin-top: 1.4em;
}
.colab_page_block h1 {
margin: 0;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-family: Museo-300, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2rem;
line-height: 1;
color: #2f292a;
}
.colab_page_block_full {
width: 100%;
overflow: auto;
display: table;
border: 1px solid black;
}
.colab_page_block_half {
width: 48%;
display: table-cell;
}
.colab_page_block_left {
padding-right: 2%;
border: 1px solid red;
}
.colab_page_block_right {
padding-left: 2%;
border: 1px solid blue;
}
.colab_text_padding {
padding-left: 4%;
padding-right: 8%;
}
.colab_image {
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.colab_bottom {
vertical-align: bottom;
}
.colab_top {
vertical-align: top;
}
.colab_margin_bottom {
margin-bottom: 3.5em;
}
And here's a link to the JSFiddle:
https://jsfiddle.net/twestfall/Lbqfo40u/4/?utm_source=website&utm_medium=embed&utm_campaign=Lbqfo40u
Change the CSS for .colab_image to:
.colab_image {
overflow:auto;
width: 100%;
height: auto;
}
Here's a working JSFiddle.
I'm playing around with a header for a site I'm going to make, and I'm trying to use CSS media selectors to change how the header is viewed on mobile phones.
Here is a fiddle of what I'm trying to do:
http://jsfiddle.net/ro7pbdkw/2/
and
Here is the code:
html:
<img src="http://lifetimefoundation.adoptsites.wpengine.com/wp-content/uploads/sites/3/2014/10/LifetimeLogolong.png" alt="LifetimeFoundation" width="311" height="122" class="header-img" align="left" style="margin-right: 10px;"/>
<div class="header" style="background-color:#6b3f24; height:122px; width:960px;" align="center">
<div class="header-text" style="padding-top: 10px; text-align: left;">
<h1>BUILDING FAMILIES AND FUTURES</h1>
<h5>Through Adoption Grants and Educational Scholarships</h5>
</div>
</div>
CSS:
h1 {
font-family: Garamond;
font-size: 200%;
color: #FFFFFF;
margin: 0px;
}
h5 {
font-family: Garamond;
font-size: 100%;
color: #D9825F;
margin: 0px;
}
#media handheld {
.header {
display:none;
}
}
I want the brown box to disappear on a cell phone and just leave the img as a header, however, I haven't been able to get the style selector to actually work properly. Any tips or comments to let me know what I'm doing wrong?
Much appreciated!
I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>
First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.
I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}