I really hope someone out there knows something about Brackets! I'm doing a project for school and it was going just fine yesterday. I have four pages, a home page, events page, contact page and about page. Somehow in the inspect element panel I have the events page loaded in the styles section and so now, no matter what I do the background image that is in the events page is loaded in all my other pages. Even if I delete it from the CSS! I can't figure it out and I have no idea how I got it there to begin with! How do I get rid of it so that I can style the pages differently with different images and all that?! Not sure how the css and html can help but I'll load it anyway.
<!doctype html>
<html>
<head>
<title>events</title>
<meta charset="utf-8">
</head>
<link href='https://fonts.googleapis.com/css?family=Miltonian+Tattoo' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Convergence' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="eventscss.css">
<body>
<div id="header">
<h1>Ready...Set...SPLASH!!</h1>
</div>
<aside class="sidebar1">
<h2>Where to?</h2>
<div id="mainnav">
<ul>
<li>Home</li>
<li>Events</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div id="one">
<img src="surprisedgirl.jpg" height="200" width="250">
</div>
</aside>
<article class="main">
<h2>PLAN YOUR NEXT BIRTHDAY WITH US!!</h2>
<p>Does someone have a birthday coming up? Why not plan a pool party? We have three different party packages to choose from.
You caan reserve anything from a little table, to an entire pool. We'll try our best to make sure the kiddos have the best
birthday ever. They'll be sure to talk about it for months to come. And you'll feel great knowing that you made it happen.
(Way to go!...)</p>
<p> The first Party Package that we offer is the standard Bronze Package.
You'll get three hours and ride passes for all. Skip straight to the front of the line of any slide you choose. We have party rooms for reservation or you
can choose a tent outdoors and poolside. Three large one topping pizzas, beverages, and wrist bands for the slides are all included for a set price of
$125. Limit of 10 wristbands. Additional bands can be purchaced for $2.00 per band.</p>
<p> Second choice for your party plans would be the Silver Package. Five party hours to toy around with, 15 slide wristbands,
jump to the front freedom, five large pizzas (three 1 topping, two 2-3 topping) beverages, party room or tent. All of this for only $150!</p>
<p> The third and final option that we offer is the Gold Package. This is the Mac Daddy of em' all! This package
includes all day play, unlimited wristbands, jump to the front freedom, eight large pizzas (of your choice) beverages, party room or tent, and a special Happy Birthday
message announced over the loud speaker before singing Happy Birthday! Your birthday boy or girl will feel as if they are on top of the world! This deal can be yours
for only $200! <br> Talk about a deal to be had!!</p>
</article>
<aside class="sidebar2">
<div id="img1">
<img src="goggle_kids_small.jpg" height="150" width="200">
</div>
<div id="img2">
<img src="waterparkkids.jpg" height="150" width="250">
</div>
<div id="img3">
<img src="slide-01.jpg" height="150" width="200">
</div>
</aside>
<style>
#one img {
padding-right:20px;
margin:10px;
width: 250px;
height: 300px;
padding-top: 60px;
transform: rotate(-10deg)
}
#img1 img{
padding-right:40px;
margin:10px;
width: 250px;
height: 200px;
transform: rotate(10deg);
}
#img2 img{
padding-right:40px;
margin:10px;
width: 250px;
height: 200px;
transform: rotate(-10deg);
}
#img3 img{
padding-right:40px;
margin:10px;
width: 250px;
height: 200px;
transform: rotate(10deg);
padding-top:20px;
}
</style>
<div id="footer">
<h4>Lilly's Pad 238 Main Street, Asheville NC 28804 (828)-669-4828 www.Lillyspad.com</h4>
h1{
padding-top: 15px;
margin:0;
height: 100px;
font-family:"Miltonian Tattoo";
font-size: 3em;
color:whitesmoke;
text-shadow:3px 3px black;
text-align: center;
background-image: url(pool-water-hd-inspiration-1.jpg);
background-repeat: repeat-x;
}
/*First column*/
.sidebar1 h2, .sidebar2 h2{
font-family: "Miltonian Tattoo";
text-align: center;
color: black;
text-shadow: 2px 2px white;
}
.sidebar1{
float: left;
width: 20%;
padding: 0 20px 0 10px;
background-image: url(Water-Drop-background.jpg);
height: 800px;}
#one{border-radius: 50%;
}
/*all main styles*/
#mainnav li{
list-style-type: none;
padding-top: 30px;}
#mainnav a:link{
text-decoration: none;
background-color:#feff00;
border-radius: 15px;
display: block;
background-size: 15px;
width: 100px;
padding: 5px 5px 5px 10px;
margin-bottom: 5px;
padding-right: 20px;
font-family: "Miltonian Tattoo";
color:black;
text-align: center;}
#mainnav{
background-color:#ccf3ff;
-webkit-box-shadow: -8px 11px 25px 0px rgba(0,0,0,0.68);
-moz-box-shadow: -8px 11px 25px 0px rgba(0,0,0,0.68);
box-shadow: -8px 11px 25px 0px rgba(0,0,0,0.68);
height: 300px;
border-radius: 20px;
padding-left:45px;}
.main{
float: left;
width: 60%;
height:800px;
padding: 0 20px;
background-image: url(happybirthday.jpg);
background-size: 400px;
background-repeat: no-repeat;
background-position: bottom;
}
.main h2{
font-family: "Miltonian Tattoo";
text-align: center;
font-size: 2em;
}
.main h3{font-family: "Miltonian Tattoo";}
.main p{
font-family: Convergence;
}
/*Second Column*/
.sidebar2{
background-image: url(Water-Drop-background.jpg);
height: 800px;
float: right;
width: 20%;
padding: 0 10px 0 20px;}
.sidebar2 p{
font-family: Convergence;
font-style: italic;
background-color: aliceblue;
text-align: center;
border-radius: 30px;
font-size: 0.9em;
-webkit-box-shadow: 10px 10px 14px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 14px -4px rgba(0,0,0,0.75);
box-shadow: 10px 10px 14px -4px rgba(0,0,0,0.75);
}
#footer{
background-color: #feff00;
clear: both;
height: 20px;
text-align: center;
font-style: italic;
font-size: .9em;
}
/*To keep from having float drops*/
*{
-moz-box-sizing: border-box;
box-sizing: border-box;}
Related
Below is the CSS that effects a div with three p's. I can't figure out how to reduce the "white space" above the first p within the border.
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
I can create the same border around just one p and the border will wrap tightly around the top of the p, but I want one boarder around all 3 p's.
Does that make sense? Technically, there is also "white space" below the last p but I'm okay with how that looks visually.
Thanks for the help!
Below is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
<!-- photo credit: https://patrickwiltrout.wordpress.com/, image
taken by ? -->
<img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius:
5px">
<div id="animal-info">
<p id="interesting-fact">Snow leopards are unable to roar
because they have different, less developed vocal chords than
other leopards
and big cats.</p>
<ul id="facts">
<li><strong><span>Scientific Name</span>:</strong>
<em>Panthera Uncia</em></li>
<li><strong><span>Average Length</span>:</strong> <em>80-135
cm</em></li>
<li><strong><span>Average Lifespan</span>:</strong> <em>10-12
years</em></li>
<li><strong><span>Habitat</span>:</strong> <em>Highlands of
Central Asia</em></li>
</ul>
<p id="summary">Known for their elusive nature, snow leopards
are referred to by locals as “mountain ghosts.” As one of the
most mysterious species on the planet, the snow leopard remains
one of the least understood, and seen, of the big cats.</p>
</div>
</div>
</body>
</html>
Below is the CSS:
#container {
font-family: "Tahoma", sans-serif;
max-width: 256px;
padding: 4px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 2px 3px 50px grey;
}
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#interesting-fact {
font-style: italic;
}
#facts {
list-style-type: none;
margin-left: -40px;
}
You got two ways to do this
First you can tagert the first p child of your div and remove the padding top
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#animal-info p:first-child {
margin-top: 0;
}
<div id="animal-info">
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>
Or you can adjust the top padding of your div
padding: top right bottom left;
Hope this helps :)
#animal-info {
max-width: 256px;
padding: 0px 8px 8px 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
<div id="animal-info" >
<p>Cat</p>
<p>Dog</p>
<p>Fish</p>
</div>
This would be the end result in your example using the first child method
#container {
font-family: "Tahoma", sans-serif;
max-width: 256px;
padding: 4px;
border: 1px solid transparent;
border-radius: 5px;
box-shadow: 2px 3px 50px grey;
}
#animal-info {
max-width: 256px;
padding: 8px;
font-size: 15px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#animal-info p:first-child{
margin-top: 0px;
}
#interesting-fact {
font-style: italic;
}
#facts {
list-style-type: none;
margin-left: -40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building the Prototype</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<h1 style="text-align: center; line-height: 0px">Snow Leopard</h1>
<!-- photo credit: https://patrickwiltrout.wordpress.com/, image
taken by ? -->
<img src="snow-leopard.jpg" alt="Snow Leopard" style="border-radius:
5px">
<div id="animal-info">
<p id="interesting-fact">Snow leopards are unable to roar
because they have different, less developed vocal chords than
other leopards
and big cats.</p>
<ul id="facts">
<li><strong><span>Scientific Name</span>:</strong>
<em>Panthera Uncia</em></li>
<li><strong><span>Average Length</span>:</strong> <em>80-135
cm</em></li>
<li><strong><span>Average Lifespan</span>:</strong> <em>10-12
years</em></li>
<li><strong><span>Habitat</span>:</strong> <em>Highlands of
Central Asia</em></li>
</ul>
<p id="summary">Known for their elusive nature, snow leopards
are referred to by locals as “mountain ghosts.” As one of the
most mysterious species on the planet, the snow leopard remains
one of the least understood, and seen, of the big cats.</p>
</div>
</div>
</body>
</html>
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 want to place the two boxes at the bottom of link, the both article-boxes (div.content), side by side like you see, but without the big distance between them. How to fix this?
Here is relevant code :
div.content {
text-align: justify;
color: #939393;
padding: 25px 90px;
margin: 0px auto 45px;
width: 960px;
border: 2px solid #F27F0E;
}
<div class="content-small" style="float: left;">
<h2></h2>
<ol class="posts"></ol>
</div>
<div class="content-small" style="float: right;">
<h2></h2>
<ol class="posts"></ol>
</div>
Using inline styles (putting the style tag inside of the element) is never a good thing, it's best practice to keep everything in a separate stylesheet and a lot more practical too.
In regards to your question you pretty much have the code already in your stylesheet, just remove the inline styles and put the both divs inside of a parent div.
HTML:
<div class="content-bottom">
<div class="content-small"></div>
<div class="content-small"></div>
</div>
Now we just need to add a little css to center everything with your current layout.
CSS:
.content-bottom {
margin: 0 auto;
width: 1144px;
}
You're probably going to want to adjust the widths and margins for the content-small classes now to your preference.
Hope this helps!
You need to apply float left to both boxes and set your margin-right to appropriate value.
delete style from this :
<div class="content-small" style="float: left;"></div>
<div class="content-small" style="float: right;"></div>
so that they become :
<div class="content-small"></div>
<div class="content-small"></div>
and then change your css like this:
div.content-small {
text-align: justify;
color: #939393;
padding: 25px 50px;
margin: 0px auto 45px;
width: 450px;
border: 2px solid #F27F0E;
float:left; /* add this */
margin-right:40px; /* add this and change value acc */
}
You can also try placing margin on each box separately to achieve your desired result
How about adding an enclosing div around the two article boxes like below. Setting its width to 1144px matches with the total width of the content boxes above.
<div style="width: 1144px; margin: 0 auto 0 auto">
<div class="content-small" style="float: left;">
...
</div>
<div class="content-small" style="float: right;">
...
</div>
</div>
create a wrapper for these 2 div
<div class="wrapper-new" style="margin:0 auto; width:...px;">
<div class="content-small" style="float: left;">...</div>
<div class="content-small" style="float: right;">...</div>
</div>
![enter image description here][1]
This is how you need to do it. The bottom two article boxes should be inside a div with fixed width 1144px and both content-small should be float:left, 2nd one with a margin-left:36px;
That's it! Run the code snippet in Full page and you can see your desired result.
NB: I've removed jQuery from the snippet. If you find my answer useful please mark it as accepted. Thanks! :)
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #fff;
background: #1A1A1A;
}
div.content {
text-align: justify;
color: #939393;
padding: 25px 90px;
margin: 0 auto 45px auto;
width: 960px;
border: 2px solid #F27F0E;
}
div.bottom-content {
padding: 25px 0;
margin: 0 auto 45px auto;
width: 1144px;
}
div.content-small {
text-align: justify;
color: #939393;
padding: 25px 50px;
margin: 0;
width: 450px;
border: 2px solid #F27F0E;
}
a {
text-decoration: none;
color: #6B6B6B;
}
a:hover {
border-bottom: 1px dotted #F27F0E;
}
dt {
font-weight: bold;
display: block;
float: left;
width: 150px;
color: #bbb;
}
img {
border: 1px solid rgba(51, 51, 51, 0.1);
}
div.date {
width: 100px;
padding-bottom: 14px;
margin-left: -120px;
float: left;
}
div.date p {
padding: 5px 10px;
margin-bottom: 0;
text-align: right;
font-family: Arial, sans-serif;
}
div.center {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 45px auto;
}
.icon {
display: inline-block;
height: 64px;
width: 64px;
text-indent: -9999em;
margin: 0 1em;
}
#github {
background-color: #4183c4;
background-image: url(http://tekkkz.com/css/github.png);
}
#twitter {
background-color: #00aced;
background-image: url(http://tekkkz.com/css/twitter.png);
}
.posts,
.posts li {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.posts li {
margin-bottom: 1em;
}
.title {
font-size: 1.2em;
}
.date {
font-style: italic;
font-size: 0.8em;
color: #bbb;
}
h1 {
font-family: Arial, sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
color: #fff;
}
h2,
h3 {
font-family: Arial, sans-serif;
font-weight: bold;
margin: 10px 0;
color: #fff;
}
footer {
text-align: center;
font-size: 0.9em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Martin Fischer">
<meta name="description" content="Personal Profile of Tekkkz (Martin Fischer)">
<meta name="keywords" content="pc, personal, profile, web, tekkkz, microcontroller, programming, gaming, avr, atml, s4, s4league, aeriagames, english, german">
<meta name="robots" content="FOLLOW,INDEX">
<title>Tekkkz - Personal Profile</title>
</head>
<body>
<header>
<h1>Tekkkz (Martin Fischer)</h1>
</header>
<div class="center">
Twitter
GitHub
</div>
<div class="content">
<h2>ABOUT</h2>
<dl>
<dt><img src="http://tekkkz.com/css/profile.jpg" alt="profile" height="135em" /></dt>
<dd>
<p>I am Martin Fischer, otherwise known online as Tekkkz. I am 17 years old and currently a student at the 'Winckelmann Gymnasium Stendal'.</p>
<p>My educational interests include mathematics and science, especially physics and chemistry. My extracurricular interests include everything that has to do with electronics, from simple soldering up to programming microcontrollers and develop complex
PCB's, general programming in C and C++ as well as linux and servers.</p>
<p>See my CV.</p>
</dd>
<dl>
</div>
<div class="content">
<h2>CONTACT</h2>
<dl>
<dt>Email</dt>
<dd>martin#Tekkkz.com</dd>
<dt>IRC</dt>
<dd>Tekkkz on Freenode</dd>
<dt>ICQ</dt>
<dd>ICQ Number: 612184097</dd>
</dl>
</div>
<div class="bottom-content">
<div class="content-small" style="float: left;">
<h2>ARTICLES</h2>
<ol class="posts">
<li>
“EUzebox with ATmega1284”
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
<div class="content-small" style="float: left; margin-left:36px;">
<h2>ARTICLES</h2>
<ol class="posts">
<li>
“EUzebox with ATmega1284”
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
</div>
</body>
</html>
Got problem with image nad text flowing.
I have image, from the right side text, but if height of text div becomes more then image div height the is beeing written from the new line under the picture, i don't need that. How to create something like
My code:
HTML:
<div id="wrapper">
<div id="content">
<div id="image" class="fleft"><img src="img/image.png" alt="dart-face"/></div>
<div id="text">
<h1>Darth Vader</h1>
<p>Darth Vader (born Anakin Skywalker) is a central character in the Star Wars saga,[1][2][3] appearing as one of the main antagonists of the original trilogy and as the main protagonist of the prequel trilogy.
<p>The character was created by George Lucas and numerous actors have portrayed him. His appearances span all six Star Wars films, and he is an important character in the expanded universe of television series, video games, novels, literature and comic books.</p>
</p>
</div>
</div>
</div>
CSS:
*{
margin: 0;
padding: 0;
}
body
{
font: 12px Arial, Helvetica, sans-serif;
background: url('../img/pattern.png');
}
#wrapper
{
max-width: 80%;
margin: 50px auto;
-webkit-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
-moz-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
-o-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
-ms-box-shadow: 0 5px 13px rgba(0,0,0,0.75);
box-shadow: 0 5px 13px rgba(0,0,0,0.75);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
background: -webkit-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
background: -moz-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
background: -o-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
background: -ms-linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
background: linear-gradient(#d8d8d8,#fff,#fff,#c0c0c0);
}
#content
{
display: inline-block;
/*position: relative;*/
}
#image
{
margin: 34px;
}
#text
{
/*position: absolute;*/
line-height: 20px;
text-align: left;
margin: 34px 25px 25px 25px;
}
#text h1, #text p
{
margin-bottom: 20px;
}
.fleft
{
float: left;
}
.fright
{
float: right;
}
Set overflow:hidden to #test to trigger its layout so it sees and stands away from floatting element around it and keep his inside .
#text {
overflow:hidden;/* triggers layout , so it cares about inside and outside floatting elements */
line-height: 20px;
text-align: left;
margin: 34px 25px 25px 25px;/* you might need to reset these since it will bang against floatting image */
}
Can also try this...The following code will easily fix the issue.
Here is updated HTML...Posting only updated part
<div id="content">
<div id="image"><img src="img/image.png" alt="dart-face"/></div>
<div id="text">
<h1>Darth Vader</h1>
<p>
Darth Vader (born Anakin Skywalker) is a central character in the Star Wars saga,[1][2][3] appearing as one of the main antagonists of the original trilogy and as the main protagonist of the prequel trilogy.
<p>
The character was created by George Lucas and numerous actors have portrayed him. His appearances span all six Star Wars films, and he is an important character in the expanded universe of television series, video games, novels, literature and comic books.
</p>
</p>
</div>
<div style="clearfix"> </div>
</div>
Now we have to remove unwanted code from CSS
Please remove following code from your CSS (same one to posted in question)
#image
{
margin: 34px;
}
#text
{
/*position: absolute;*/
line-height: 20px;
text-align: left;
margin: 34px 25px 25px 25px;
}
.fleft
{
float: left;
}
.fright
{
float: right;
}
Now simply add the following CSS
#image
{
float: left;
width:30%; /*Choose width accordingly*/
}
#text
{
float: left;
width:60%; /*Choose width accordingly*/
}
.clearfix
{
display:block;
clear:both;
content:'';
}
try this hope this help....and if any query ? donot hesitate to comment THANKS
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.