I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;
Related
I am trying to recreate what Lynda.com does with their course listing thumbnail image (see here). I am not sure how to place the image inside of my already existing code here. What I am not sure of is the dimensions of what the image should be each time and I am not sure how to handle the image resizing if my description is really long and widens the border. How would I do this?
If worse comes to worse, I will keep the descriptions small. I also realize that if the image also gets bigger if the description gets longer, the image getting bigger as a side effect will not look consistent with the other thumbnail images on the page.
HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
<a class="course_list_link" href="">
<p class = "course_list_border">
<strong> Title </strong> <br/> <br/>
description <br/> <br/>
skill_level
date
Views: views
subject </p> </a>
CSS:
.course_list_border{
border-style: solid;
border-width: 1px;
border-color: #DCDCDC;
padding: 10px;
word-wrap: break-word;
}
.course_list_border:hover{
background-color: #F8F8F8;
cursor: pointer;
}
.course_list_link{
color: black;
}
.course_list_link:hover{
text-decoration: none;
color: black;
}
body {
min-height: 400px;
margin-bottom: 100px;
margin-top: 0%;
clear: both;
padding-top: 55px;
font-family: 'Roboto', sans-serif;
font-size: 16.5px;
}
I have made some changes in your css and HTML file
.course_list_border{
border-style: solid;
border-width: 1px;
border-color: #DCDCDC;
padding: 10px;
word-wrap: break-word;
}
.course_list_border:hover{
background-color: #F8F8F8;
cursor: pointer;
}
.course_list_link{
color: black;
display: inline-block;
width: 30%;
}
.course_list_link:hover{
text-decoration: none;
color: black;
}
body {
min-height: 400px;
margin-bottom: 100px;
margin-top: 0%;
clear: both;
padding-top: 55px;
font-family: 'Roboto', sans-serif;
font-size: 16.5px;
}
<a class="course_list_link" href="">
<p class = "course_list_border">
<strong> Title </strong> <br/> <br/>
description <br/> <br/>
<img src="https://via.placeholder.com/200X150" alt="Lights" style="width:100%"/>
skill_level
date
Views: views
subject </p>
</a>
As you are using bootstrap you can also make use of existing classes for creating this kind of image thumbnails
https://getbootstrap.com/docs/4.0/content/figures/
Generally, it's far better to separate all items into elements, instead of concatenating them into a single paragraph. For example:
<style>
a.course_list_link {
display: block;
width: 300px;
border: 1px solid #DCDCDC;
border-radius: 5px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
transition: all, 0.3s, ease;
}
a.course_list_link:hover .thumbnail {
filter: grayscale(50%);
}
a.course_list_link:hover {
background-color: whitesmoke;
}
a.course_list_link:active {
background-color: white;
}
a.course_list_link:hover p.description {
color: black !important;
}
.course_list_link .thumbnail {
background-color: grey;
background-size: cover; /* Guarantees your background always fits the thumbnail size, no matter its aspect ratio */
height: 150px;
}
.course_list_link .play-button {
opacity: 0.5;
height: inherit;
width: inherit;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
.course_list_link:hover .play-button {
background-image: url('https://www.drury.edu/images/socialmediaicons/play_button.png');
}
.course_list_link .content-area {
margin: 5px;
}
.course_list_link h2 {
color: black;
font-weight: 500;
font-size: 18px;
margin: 0;
}
.course_list_link p.description {
margin: 0;
margin-bottom: 5px;
font-size: 14px;
color: grey !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: black;
}
.metadata {
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.metadata .skill {
color: grey;
}
.metadata .date {
color: grey;
}
.metadata .views {
color: grey;
}
.metadata .subject {
font-weight: bold;
color: grey;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<a class="course_list_link" href="#">
<div class="thumbnail" style="background-image: url('https://img-aws.ehowcdn.com/560x560p/photos.demandstudios.com/getty/article/188/230/dv030463.jpg');"><!-- Set the bg image of this element in CSS -->
<div class="play-button"></div>
</div>
<div class="content-area">
<h2>Title</h2>
<p class="description">Description of the video, which may or may not be very long depending on the type of video, and what is chosen to display, and how many lines the space is allowed to occupy in the thumbnail.</p>
<div class="metadata">
<div class="column">
<div class="skill">Skill level</div>
<div class="views">Views</div>
</div>
<div>
<div class="date">Date</div>
</div>
<div>
<div class="subject">Subject That is Too Long And Will Inevitably Overflow to New Lines If Not Blocked by Some Sort of CSS Trick</div>
</div>
</div>
</div>
</a>
I also like to set the thumbnails in CSS. That way, even if your thumbnail changes size, it is always cropped at the same size within the HTML element. However, it's always good to ensure that images are not oversized so that the page loads quickly; therefore, making real thumbnails is always a good idea.
Just as a side note, it's general CSS good practice to use hyphens instead of underscores, so .course_list_link becomes .course-list-link.
I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
im currently working on my Personal Web Page. I have made a Starting page, that says my name and other stuff. I have a button, that I want to connect it to the Main Page. Here is the code: (It's Updated since the first code)
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One"
rel="stylesheet">
</head>
<body>
<div class="heading">
<span class="title1">Alexandros Kordatzakis</span>
<span class="title2">Technology, Coding And More...</span>
<button class="continue">Continue Reading About Me</button>
<hr>
</div>
<div id=Copyright>Copyright ©2017 Alexandros Kordatzakis.</div>
</body>
</html>
And CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline-width: 0px;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 50px;
}
#Copyright{
clear: left;
background-color: #0053BC;
text-align: center;
padding: 12px;
height: 8px;
font-family: 'Patua One', cursive;
font-size: 18px;
}
Questions I have:
1) When the User press the button, "READ MORE ABOUT ME" it appears a blue line-border. Why?
2) How can I link this "Starting Page" to my main page?
Thanks!
**EDIT 1 : ** Some details, like Copyright and else, are not finished, so sorry for mistakes. Just help me with my questions! :)
**EDIT 2: ** I have thought about my page design and I think that it's better to make this code "Starting Page" and not allow the user to do anything else like rolling, then the user to press this button and "hide" this background and text and show my other content. My "biography". How can i do that? Thanks btw.
To remove the focus outline use something like this:
.continue:focus{
outline-width: 0px;
}
To link a page use href. Example
Your Text Here
EDIT 2:
To show content on button click I would do this:
First add a new div with your content inside like so, and another div to set the style of your info div:
<div id="yourInfo">
<p>Your Content Here</p>
<p>Your Content Here</p>
<p>Your Content Here</p>
</div>
<div id="yourInfoStyle"></div>
Then you want to add this to your css file:
#yourInfo{
display: none;
}
Lastly, we need to add a function to show and hide the div, so put this
script in your html file:
<script>
var shown = false;
function showContent(){
if(!shown){
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
shown = true;
} else {
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
shown = false;
}
}
</script>
So here's the full code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
rel="stylesheet">
<script>
var shown = false;
function showContent(){
if(!shown){
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
shown = true;
} else {
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
shown = false;
}
}
</script>
</head>
<body>
<div class="heading">
<span class="title1">Alexandros Kordatzakis</span>
<span class="title2">Technology, Coding And More...</span>
<button class="continue" onclick="showContent()">Continue Reading About Me</button>
<div id="yourInfo">
<p>Your Content Here</p>
<p>Your Content Here</p>
<p>Your Content Here</p>
</div>
<div id="yourInfoStyle"></div>
<hr>
<span class="copyright">Copyright</span>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline: none;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 100px;
}
.copyright{
}
#yourInfo{
display: none;
}
Hope this helped you! :D
To link your Starting page you can use the anchor tag. Ex in your Starting page:
(Name of the website).
For any help you can also visit w3shools. They provide the best tutorials.
Answer 1:
<button class="continue" style=".continue:focus{outline-width: 0px;}">Continue Reading About Me</button>
Answer 2:
example
So I'm trying to create a landing page exactly like this (FYI, to work on my HTML/CSS skills, I have decided to exactly imitate this landing page just for practice!)
http://oi67.tinypic.com/b8qp8i.jpg
However, as you can see from what I did, the full background picture (sailing boat + ocean) does not show up in the first column: http://oi66.tinypic.com/o7ktgl.jpg
Another issue is that on the left side of the background image on the third column, I keep seeing on a small "broken page" icon (I don't know why it's there but it's really been annoying) ... is it an image problem or something wrong with the image file?
Help would be much appreciated, thank you!
Here is my full HTML and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<title>Relaxr</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="mainColumn">
<header>
<h1>Relaxr</h1>
<h2>Get piece of mind with a single tap</h2>
</header>
<span>
<button id="getButton">Get it Now</button>
</span>
</div>
<div id="secondColumn">
<header>
<h1>Benefits</h1>
<p>The perfect personal assistant. Relaxr does your job<br>for you so you can enjoy life as it is meant to be.</p>
<ul class="benefitss">
<li>Schedule meetings for you</li>
<li>Excel automation to complete your <br>work for you</li>
<li>Responds to e-mails on your behalf</li>
<li>Does all yor work for you with our<br>revolutionary technology</li>
</ul>
</header>
</div>
<div id="thirdColumn">
<img src="../images/testimonial_bg.jpg">
<p>“Relaxr changed my life. I’ve been able<br> to travel the world, spend limited time<br> working and my boss keeps thanking<br>me for crushing work.”</p>
<p>- Amanda, Intuit</p>
</div>
<div id="fourthColumn">
<button id="signupButton">Sign Up Now!</button>
</div>
<div id="fifthColumn">
<p>Relaxr</p>
<div id="footer">
<p>Copyright 2015. Relaxr.</p>
</div>
</div>
</body>
</html>
CSS:
/******************************************
/* SETUP
/*******************************************/
/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
}
/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear {
clear: both;
}
.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */
}
.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */
}
/******************************************
/* BASE STYLES
/*******************************************/
body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Open Sans;
background: url(../images/header_bg.jpg) no-repeat center top;
background-size: cover;
}
/******************************************
/* LAYOUT
/*******************************************/
/*MAIN COLUMN*/
#mainColumn {
width: 100%;
height: 450px;
text-align: center;
}
#mainColumn h1 {
color: white;
padding-right: 80%
}
#mainColumn h2 {
color: white;
font-size: 24px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 50px;
text-align: center;
}
header {
height: 40%;
}
/*GET IT NOW BUTTON*/
#getButton {
background-color: yellow;
border-radius: 3px;
border-style: none;
font-size: 14px;
font-weight: 700;
height: 30px;
width: 130px;
}
/*SECOND COLUMN*/
#secondColumn {
width: 100%;
margin: auto;
height: 360px;
background-color: white;
}
#secondColumn h1 {
padding-left: 65px;
padding-top: 60px;
color: navy;
font-size: 20px;
font-weight: 700;
}
#secondColumn p {
font-size: 13px;
padding-left: 70px;
}
.benefitss {
margin-left: 80px;
padding-top: 20px;
font-size: 13px;
}
.benefitss li{
padding-top: 2px;
}
/*THIRD COLUMN*/
#thirdColumn {
width: 100%;
height: 250px;
}
#thirdColumn p:nth-child(2) {
color: #ffffff;
font-style: italic;
font-size: 15px;
text-align: center;
}
#thirdColumn p:nth-child(3) {
color: #ffffff;
font-size: 18px;
font-weight: 700;
text-align: center;
}
/*FOURTH COLUMN*/
#fourthColumn {
background-color: yellow;
width: 100%;
height: 75px;
}
/*SIGN UP BUTTON*/
#signupButton {
background-color: #000040;
color: white;
border-radius: 3px;
border-style: none;
font-size: 12px;
font-weight: 800;
height: 30px;
width: 150px;
margin-left: 42.9%;
margin-top: 25px;
}
#fifthColumn {
background-color: #000000;
width: 100%;
height: 225px;
position: absolute;
}
#fifthColumn p {
color: yellow;
text-align: center;
font-size: 24px;
font-weight: 800;
}
#footer p {
font-size: 9px;
color: #ffffff;
text-align: center;
padding-top: 11%;
}
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>