So I will apologize in advance if this question has already been asked, but I will mention it anyway. Basically there is a problem with an HTML document that I have been working on. I set a rule for the links in the span tags for every different link, because I want them to have different text-decoration properties, and it doesn't seem to apply them. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title> MSCC Software </title>
<link type="text/css" rel="stylesheet" href="mscccss.css">
</head>
<body> <!-- I will do an early apology if there is any bad code -->
<div id="header">
<p id="topline"> MSCC Software </p>
<p id="bottomline"> www.mscc.com </p>
</div>
<div id="sidebar">
<span id="google"> Google </span>
<span id="example"> Example </span>
<span id="debt"> Debt </span>
</div>
<div id="content">
<p> Happy Holidays </p>
<img src="http://res.freestockphotos.biz/pictures/12/12626-illustration-of-a-decorated-christmas-tree-pv.png" />
<p> From MSCC! </p>
</div>
<p id="credit"> Created By PharellPharell </p>
</body>
</html>
Now my CSS:
body{
height: 970px;
background-color: rgba:(223,223,223,80%);
font-family: Verdana;
margin-top: 15px;
margin-bottom: 15px;
margin-right: 3%;
margin-left: 3%;
}
#header{
height: 12%;
border: solid red;
background-color: rgb(127,0,0);
border-radius: 25px;
text-align: center;
color: #FFFA7C;
margin-bottom: 15px;
}
#topline{
font-size: 30px;
margin-bottom: 0px;
}
#bottomline{
font-size: 20px;
}
#sidebar{
height: 75%;
width: 15%;
border: solid red;
border-radius: 25px;
background-color: rgb(127,0,0);
text-align: center;
padding-right: 25px;
display: inline-block;
float: left;
}
#google{
font-size: 25px;
color: #EC00BC;
text-decoration: none;
display: block;
padding-bottom: 10px;
}
#example{
font-size: 25px;
color: #EC00BC;
text-decoration: overline;
display: block;
padding-bottom: 10px;
}
#debt{
font-size: 25px;
color: rgb(7,239,20);
text-decoration: none;
}
#content{
height: 75%;
width: 77%;
background-color: rgba(0,119,31,0.9);
border: solid rgb(127,0,0);
border-radius: 25px;
color: rgb(127,0,0);
font-size: 72px;
text-align: center;
float: right;
}
img{
height: 300px;
}
#credit{
font-size: 40px;
color: rgb(127,0,0);
font-family: Arial;
padding-left: 550px;
}
So yeah, that is basically it. I can't figure out what to do about it, and if I'm making a stupid mistake, I apologize. Help would be appreciated for this,
Thanks so much!
BTW. Fun fact- PharellPharell is my GitHub username, you can find me on there if you want to look me up.
I think you should be targeting the a tags instead of just the span they are wrapped in. For example:
#google a{
text-decoration:none;
}
Another approach is to remove the text-decoration from all the links on the site, which will allow the more specific rules to take precedence.
a {
text-decoration: none;
}
Related
body {
background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
font-size:50px;
font-family: 'Raleway', sans-serif;
position: absolute;
color: white;
left: 790px;
}
.title {
position: relative;
}
.text {
color: white;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
line-height: 10px;
}
.nfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black|50%;
}
.sfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black;
}
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:750px;
margin-bottom: 500px;
background-color:black;
position: absolute;
}
.text-desc {
color:white;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
}
.buttonnfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonof {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
background-color:#05a2aa;
}
.buttonsfa:hover{
background-color:#05a2aa;
}
.buttonof:hover{
background-color:#05a2aa;
}
<!doctype html>
<html>
<head>
<title> SpeedyAlts </title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class='bg'>
<a class="title"> SpeedyAlts </a>
<div class="nfa">
<center>
<a class="text"> NFA Account </a>
<br>
<br>
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
</center>
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="sfa">
<center>
<a class="text"> SFA Account </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="of">
<center>
<a class="text"> Optifine Cape </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
</div>
</div>
<script src="https://embed.selly.gg"></script>
</body>
</html>
I have got no idea why it is not working. For some reason with margin-top margin-left etc. It's not moving it up nor down with any of the margins. Could Anyone help? I am not that good at HTML nor with CSS so excuse any code that is badly formatted if there is any. Also, if anyone could give me any advice on problems like this in the future that would be helpful. Thanks.
Your div in question has position:absolute. You will need to either remove this, or use top and bottom, left and right to move it on the page. In your example, if you'd like to move the element up on the page you will need to declare:
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
background-color:black;
position: absolute;
left:750px;
bottom: 500px;
}
Please keep in mind this means your element will always be 500px from the bottom and 750px from the left. It is better to use percentage values.
To move it up, you can try one of these to the class .of :
Margin approach
margin-top:-50px;
Absolute positioning approach
top: 300px; //change this value as needed
Transform approach
transform:translateY(-50px);
This is a demo image
The CSS Constraints to be applied are
The web page should have
Constrainnts Table
h3
The text inside h3 tag - Cascading Style Sheet
With a margin for the top as 10% , the text to be aligned to center and the font size xx-large and style “Arimo” with the color of #FFFFFF
<!DOCTYPE html>
<html>
<head>
<title>Capgemini</title>
<style type="text/css">
#home{
border-style: solid;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 15%;
margin-right: 10%;
height: 550px;
width: 900px;
background-color: #D9D9D9;
}
header{
text-align: center;
color: #990000;
font-size: 25px;
}
p{
text-indent:8%;
word-spacing: 40px;
color: #FFFFFF;
background-color: #990000;
margin-left: 90px;
margin-right: 90px;
}
#intro{
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15%;
margin-left: 15%;
height: 400px;
width: 600px;
background-color: #525252;
}
h2{
text-align: center;
color: #FFFFFF;
font-size: xx-large;
}
h3{
margin-top: 10%;
text-align: center;
font-size: xx-large;
font-family: "Arimo";
color: #FFFFFF;
}
table,tr{
color: #FFFFFF;
font-family: "Arimo";
margin-top: 10px;
margin-left: 10px;
text-align: left;
}
footer{
text-align: center;
color: #990000;
}
</style>
</head>
<body>
<section id="home">
<header>Web Programming Learning</header>
<p>HOME MATERIALS COMPETITION PASTYEARS ABOUT</p>
<section id="intro">
<h2>CAPGEMINI</h2>
<h3>Cascading Style Sheet</h3><br>
<table>
<tr>
<th>Compreshensive curriculum</th>
<th>Insightful Guest Lectures</th>
<th>interaction with sponsors</th>
<th>$30,000+in Total Prizes</th>
</tr>
</table>
</section>
<footer>
Copyright © 2017 teknoturf
</footer>
</section>
</body>
</html>
The above code showing an error after evaluating as:
CSS applied for the h3 tag is incorrect. Check with the requirement Specification
false
What could be the error, though everything matches with the given constraints?
Your specifications aren't clear. The top margin should be 10% of what? What your code does is give a margin of 10% of the width of the containing block. Read W3 specifications
It could be 10% of the height of the element, 10% of normal margin? Hard to tell.
Your h3 tag seems correct, problem lies elsewhere. Read the description carefully and check the constraints once again. Happens with me as well!
Remove the quotes from "Arimo". It works then.
If the error shows "CSS failed for idName is incorrect" then for this particular question try changing the text inside h2 tag as "LEARN TO LEAD" as specified in the demo image.
<h2>LEARN TO LEAD</h2>
instead of
<h2>CAPGEMINI</h2>
Try to run the code written below. I think this should work or you can visit capegemini css handson solution
<!DOCTYPE html>
<html>
<head>
<style>
#home {
border-style: solid;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 15%;
margin-right: 10%;
overflow: hidden;
height: 550px;
width: 900px;
background-color: #D9D9D9;
}
#intro {
border-style: solid;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15%;
margin-right: 15%;
overflow: hidden;
height: 400px;
width: 600px;
background-color: #525252;
}
header {
text-align: center;
font-size: 25px;
color:#990000;
}
p
{
text-indent: 8%;
word-spacing: 40px;
color:#FFFFFF;
background-color:#990000;
margin-left: 90px;
margin-right: 90px;
}
h2
{
text-align: center;
font-size: xx-large;
color:#FFFFFF;
}
h3
{
text-align: center;
font-size: xx-large;
color:#FFFFFF;
margin-top: 10%;
font-family: Arimo;
}
table
{
color:#FFFFFF;
font-family: Arimo;
margin-top: 10px;
margin-left: 10px;
}
footer
{
text-align: center;
color:#990000;
}
</style>
</head>
<body>
<section id="home">
<header>Web Programming Learning</header>
<p>HOME
MATRIALS
COMPETITION
PASTYEARS
ABOUT
</p>
<section id="intro">
<h2>CAPGEMINI</h2>
<h3>Cascading Style Sheet</h3>
<table>
<tr><td>Comprehensive curriculum</td><td>Insightful Guest
Lectures</td><td>interaction with sponsors</td><td>$30,000+in Total
Prizes</td></tr>
</table>
</section>
<footer>Copyright © 2017 teknoturf</footer>
</section>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm currently building a website and and I can't find a CSS positioning method that works, meaning any CSS positioning element that doesn't make other HTML elements behave weirdly. Is there any CSS positioning methods that would position an HTML element precisely, accurately and not cause (many) issues with other elements? So far float and position: absolute; don't work well. Thanks!
Since apparently what I'm asking is unclear, I'm asking "What kind of positioning can I use that doesn't have any (or few) side effects?"
Here's the Code I'm working on:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-color: red;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Each positioning method has a purpose and well-defined, if sometimes not intuitive, behavior. You cannot pick one that "won't mess things up". There's no shortcut like "always use relative", because each method accomplishes something different that cannot be accomplished by the other methods.
I happen to think positioning in CSS is abysmally defined, but it's what we have to work with and the only thing you can do is learn what each one does and how they interact. There WILL be some things you cannot accomplish1, and until CSS layout matures that will continue to be the case.
The only advice I can give you is to budget some time, say 8-16 hours over the next few weeks, to play with basic layouts and experiment with all the positioning methods. Use Firefox or Chrome's developer tools to examine in detail how things are laid out, and make specific changes one at a time until you start to develop a feel for how the options interact with each other. This is a highly complex mess and it will take some time to learn it. But once you do you will have a skillset that will serve you well.
1 As I recently learned to my great disappointment. I did find some workarounds gross hacks that involved duplicating content but that way lies madness. I hope the new flex positioning stuff gets worked out with some sanity but I'm not holding my breath.
Remove this from your HTML :
<div id="searchbox_div">
</div>
but obviously keep the form inside it, it dosent need to be contained in a div since its already inside the nav element.
Here is working Fiddle
HTML & CSS question: For this assignment we are not supposed to use floats, but instead only use block, inline-block, and inline. Even though I have set the side-bar div to inline block, and the main-content div to inline-block, and the width less then the wrapper width, It is not aligning left and right. Can anyone please help me understand what I need to fix.
I know this is a lot of code to put in here, but I am not sure what I need to put in, and what I don't. I looked around and tried to find an answer but if this question has already been asked and solved please reference me. Thanks.
Google drive of the html and css (sorry to have to send the whole file, I was not sure what it was so I decided to attach the whole html and css file.)
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Word Stream</title>
<meta name="description" content="Pay per click search marketing software offers a means for accomplishing two core requirments for PPC optimization"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Header (Logo and Nav) -->
<div id="header">
<div id="nav">
<ul>
<li>Products</li>
<li>|</li>
<li>Products</li>
<li>|</li>
<li>Blog</li>
<li>|</li>
<li>Support</li>
<li>|</li>
<li>AdWords Grader</li>
</ul>
<form id ="login">
<label>
<button class="button" type="button">Login</button>
</label>
</form>
</div>
<div id="logo">
<img src="logo.png" alt="Logo">
<span id="word">Word</span>
<span id="stream">Stream</span>
</div>
</div>
<!-- Main content section -->
<div id="main-page">
<div id="banner">
<h1>WordStream Internet Marketing Software</h1>
</div>
<!-- main side of page -->
<!-- Side bar (info and Advertisment) -->
<div id="side-bar">
<div id="side-bar-content">
<h1>Wordstream for PPC</h1>
<h2>Drive More Profits Through PPC!</h2>
<p>Get Started with <span class="blue">Wordstream</span>'s Powerful PPC Platform Today</p>
<form>
<label>
<button class="button1" type="button">SCHEDULE DEMO</button>
</label>
<label>
<button class="button2" type="button">FREE TRIAL</button>
</label>
</form>
<p class="center">(No Credit Card Required)</p>
</div>
<!-- side bar ad -->
<div id="side-bar-ad">
<div id="wrap-img-text">
<h3>How does your adWords performance measure up?</h3>
<p>Get a free, instant report with the WordStream Adwords Performance Grader</p>
<form>
<label>
<button class="graded" type="button">Get Graded Today</button>
</label>
</form>
</div>
<img class="img" src="left_content_ad1.png" alt="Oops, your browser isn't showing this image.">
</div>
</div>
<div id="handle">
<div id="upper-bar">
<img class="inline" src="home_button.png" alt="home">
<span class="blue">PPC</span>
<!-- contact info and phone pic -->
<div id="contact" class="inline">
<img class="inline phone" src="phone.png" alt="phone">
<!-- text only -->
<div class="inline">
<p class="top">
<span class="hours">Mon - Fri 9 a.m. - 5 p.m. (EST)</span>
<br>
<span class="number">855.967.3787</span>
<br>
<span class="int-number">International: +1.617.963.0555</span>
</p>
</div>
</div>
</div><br/>
<!-- main content starts here -->
<div id="main-content">
<h1>PPC - Achieve More Efficiant Pay-Per CLick (PPC) Marketing</h1>
<p><span class="bold">PPC</span>(pay-per click) search marketing software offers a means for accomplishing two core requirements for PPC optimization:</p>
<ul>
<li>
<span class="bold">PPC Automation</span>-While it would be impossible (and inadvisable!) to automate every aspect of pay-per-click advertising, automating away redundant, time-consuming tasks affords you a means of increasing productivity. Often, this means being able to produce an amount of work that would otherwise have been unachievable for you and your business.
</li>
<li>
<span class="bold">PPC Management</span>-PPC management refers to the maintenance and prioritizing of paid seach marketing tasks. Being able to oversee various aspects of your account while assigning each item on a seemingly endless to-do list an appropriate value can make or break an online ad campaign.
</li>
</ul>
<p>
WordStream's PPC software is specifically designed to aid in these two PPC search engine marketing areas. This page will show you both the processes the software is automating for you, and the best course of action to take where workflow is concerned.
</p>
<!-- Bordered *Trial* box with logo and button -->
<div id="trial-box">
<img src="content_ad.png" alt="ad">
<div class="text-button">
<h3>Drive More Profits Through PPC - Try Our Platform FREE</h3>
<p>Get instant access to WordStream's innovative <span class="bold"> Quality Score</span> and <span class="bold">Account Management</span> tools through our <span class="bold"> FREE 7-day Trial</span>. Risk Free, No Credit Card Required and No Automatic Signups.</p>
<form>
<label>
<button class="get-started" type="button">Get Started Today!</button>
</label>
</form>
</div>
</div>
<!-- under the trial box -->
<h2>Automation And Your PPC Search Campaign</h2>
<p>Another two lines of text that I really dont feel like copying. Soooo much text to copy, not worth it. Im just writing this instead to fill in the space.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#wrapper{
width: 1000px;
margin: 0px auto;
}
/*HEader things*/
#header{
width: auto;
position: relative;
height: 100px;
}
#logo{
display: block;
text-align: left;
position: absolute;
bottom: 0px;
}
#logo img{
vertical-align: text-bottom;
width: 50px;
}
#word{
color: grey;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#stream{
color: blue;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#nav{
display: block;
margin: 10px 30px;
position: absolute;
right: 0px;
}
#nav ul{
display: inline-block;
background-color: #F0F0F0;
border-radius: 5px;
padding: 0px 10px 5px;
padding-bottom: 7px;
}
#nav li{
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
#login{
display: inline-block;
margin-left: 20px;
}
.button{
width: 60px;
height: 25px;
background-color: blue;
border-radius: 5px;
border: 0px;
color: white;
}
/*Banner right under header*/
#banner{
background-color: blue;
padding: 5px 10px;
margin: 15px 0px;
font-size: 10px;
box-shadow: 0px 50px 200px grey;
}
#banner h1{
color: white
}
/*sidebar*/
#side-bar{
display: inline-block;
width: 220px;
}
#side-bar-content{
border-bottom: 1px solid lightgrey;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side-bar h1{
font-size: 15px;
color: blue;
}
#side-bar h2{
font-size: 12px;
color: darkred;
}
#side-bar p{
font-size: 11px;
}
.button1{
border: 0px;
background-color: blue;
color: white;
width: 220px;
padding: 3px 0px;
margin-bottom: 3px;
border-radius: 5px;
}
.button2{
border: 0px;
background-color: orange;
color: white;
width: 220px;
padding: 3px 0px;
border-radius: 5px;
}
.center{
text-align: center;
}
/*Bottom half of sidebar*/
#side-bar-ad{
position: relative;
}
#wrap-img-text{
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
#wrap-img-text h3{
font-size: 15px;
padding: 5px;
color: blue;
}
#wrap-img-text p{
padding: 3px;
}
.graded{
width: 180px;
background-color: darkblue;
color: white;
border-radius: 10px;
margin: 5px;
}
.img{
width: 210px;
height: auto;
}
.blue {
color: blue;
}
#handle{
vertical-align: top; display: inline-block;
}
/*Under the panel (phone number etc)*/
#upper-bar{
display: inline-block;
vertical-align: top;
position: relative;
width: 720px;
height: 110px;
border-bottom: 1px solid lightgrey;
}
#upperbar hr{
position: absolute;
bottom: 0px;
}
.inline{
display: inline-block;
vertical-align: top;
}
#contact{
position: absolute;
height: 110px;
right: 0px;
top: 0px;
}
.phone{
height: 70%;
width: auto;
}
.number{
color: blue;
font-family: Impact, Charcoal, sans-serif;
font-size: 45px;
}
.int-number{
font-size: 15px;
}
/*main content section*/
#main-content{
display: inline-block;
width: 700px;
vertical-align: top;
}
#main-content li{
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px
}
#main-content h1{
font-size: 23px;
color: blue;
margin-bottom: 5px;
margin-top: 15px;
}
#main-content p{
margin-bottom: 5px;
margin-top: 15px;
}
.bold{
font-weight: bold;
}
#trial-box{
border: 5px solid blue;
padding: 10px;
}
#trial-box img{
display: inline-block;
vertical-align: top;
}
.text-button{
display: inline-block;
width: 600px;
vertical-align: top;
}
h3{
color: blue;
}
.get-started{
background-color: limegreen;
color: white;
border-radius: 5px;
border: 0px;
width: 150px;
padding: 5px;
}
h2{
color: blue;
font-size: 17px;
margin-top: 10px;
}
Output:
Check out this Fiddle
EDIT:
Q:Why the code didn't work before?
A:
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>