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.
Related
I've created a website and the footer on the main page is alright on the bottom of the page. But the footer on other pages is in the middle of the page. On this page are actually two divs aligned next to each other and it looks like the footer is between them. I've tried everything I found on other questions like this (I mean position: absolute, relative, fixed) and nothing could move the footer on the bottom of the page. I'm very beginner in HTML and CSS, so I'm sorry if there are more problems in my code.
Here is my html code:
<div class="kontaktujte_nas">
<form class="kontaktni_formular" action="kontaktni_formular.php" method="POST">
<label for="jmeno">Celé jméno</label>
<input type="text" id="jmeno" name="jmeno" placeholder="Jan Novák">
<label for="email">Váš Email</label>
<input type="email" id="mail" name="mail" placeholder="jan.novak#email.cz">
<label for="predmet">Předmět</label>
<input type="text" id="predmet" name="predmet">
<label for="zprava">Zpráva</label>
<textarea id="zprava" name="zprava"></textarea>
<button type="submit" name="odeslat">ODESLAT</button>
</form>
<div class="kontaktni_informace" style="background-image: url(assets/icons/adresa.png);">
<span class="k_informace">Horní Domaslavice 293, 73951</span>
</div>
<div class="kontaktni_informace" style="background-image: url(assets/icons/mail.png);">
<span class="k_informace">info#bohmen.cz</span>
</div>
</div>
And my css:
body {
background-color: #212121;
}
.kontaktni_informace {
width: 40%;
float: right;
background-color: black;
background-repeat: no-repeat;
display: block;
margin-top: 40px;
}
.k_informace {
font-family: CovesLight;
font-size: 18px;
font-weight: bold;
padding: 8px 0px 8px 45px;
display: block;
color: #888888;
}
.kontaktujte_nas {
width: 50%;
margin: 0px auto;
padding-top: 40px;
display: block;
}
.kontaktni_formular {
font-family: TeXGyreAdventorRegular;
float: left;
width: 40%;
margin-top: 0px;
}
.kontaktni_formular input, textarea {
display: block;
width: 100%;
font-size: 16px;
padding: 7.5px;
border: 4px solid #888888;
}
.kontaktni_formular label {
display: block;
padding: 15px 0px 2.5px;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
}
.kontaktni_formular button {
font-family: TeXGyreAdventorRegular;
font-size: 18px;
margin-top: 15px;
padding: 5px 10px;
cursor: pointer;
margin-right: auto;
margin-left: auto;
display: block;
float: right;
}
.page_title {
margin-top: 0px;
text-align: center;
}
.title span {
font-size: 48px;
font-family: TeXGyreAdventorRegular;
color: #ffffff;
letter-spacing: 5px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
footer {
font-family: TeXGyreAdventorRegular;
text-align: center;
background-color: #111111;
padding: 5px;
color: #ffffff;
width: 100%;
}
.copyright {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
Try adding overflow: auto; to .kontaktujte_nas
You probably want something like this: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
Found by googling "footer at the bottom of the page" ;)
I believe your problem has been resolved.
But a quick review of your website which I think might help you now and forever:
Try following a semantic structure e.g let the header tag do the job of a heading just as you have the footer and let the main tag handle the remaining content e.g aside and so on.
So basically, i see you have some navigation elements but they are not inside a form of header=>nav=>ul, let that navigation elements at the topest of your page go into the header tag and let the lis go into the ul tag and let the ul go into the nav tag eg:
<header>
<nav>
<ul>
<li>
<a href=".../home">
Home
</a>
</li>
</ul>
</nav>
</header>
The reason why following a standard structure is because they abide by a rule that is been considered when building accessibility tools e.g screen-reader for disable people. And if you dont follow this standard, you will drain yourself either not doing it or doing it imperatively.
So in summary a body holds the header,the main and the footer.
Happy coding, cheers 😉🍺
I have read almost every post on here about divs not lining up side by side but none of them apply to me.
It seems like I am missing a float:left; on both blocks but for whatever reason, they are not honoring that. If I do float:right; to the right container, then it just pushes the right container under the left container.
So far I have tried css attributes:
float: right and left;
display: in-line;
display: block;
width of both left nav and right container
It seems to me like the "main container" is preventing the right container from moving up but, this div is inside that container. I have also tried z-index, and position.
what am I doing wrong here?
body {
font-family: Arial, Helvetica, sans-serif !important;
background: URL("http://www.mscdirect.com/global/application-content/images/header/ribbon-bg-1.gif") repeat-x scroll top left;
clear: both;
}
#header {}
#content-container {
width: 961px;
}
.top-container {
border-bottom: 1px solid #ccc;
cursor: pointer;
font-size: 14px;
font-weight: bolder;
margin: 5px 0px 0px 20px;
padding: 10px 0 18px;
text-align: center;
text-transform: uppercase;
}
.reg-text {
font-weight: normal;
text-transform: uppercase;
font-size: 12.5px;
cursor: pointer;
}
.red-text {
color: #db403b;
font-size: 18px;
text-transform: uppercase;
cursor: pointer;
}
.left-container {
width: 262px;
border: 1px solid #ccc;
margin: 20px 0px 0px 20px;
}
.left-nav {
width: 245px;
margin-top: 10px;
}
.left-nav-head {
text-transform: uppercase;
width: 208px;
margin: 0px 0px 6px 7px;
padding: 5px 20px 3px 14px;
font-size: 12px;
list-style-image: none;
color: #fff;
background: #345599;
}
.left-nav li {
background: rgba(0, 0, 0, 0) url("http://www.mscdirect.com/global/application-content/images/content/contentArrow2.gif") no-repeat scroll 16px 7px;
list-style: inside none none;
margin: 0px 0px 5px 5px;
padding: 4px 16px 6px 27px;
font-size: 13px
}
.right-container {
width: 662px;
display: block;
}
ul {
list-style: none;
}
li:nth-child(odd) .prod-text-box {
float: left;
}
li:nth-child(odd) .prod-img-box {
position: relative;
padding-right: 100px;
}
#main-container {
width: 961px;
margin: 0px auto;
}
a {
text-decoration: none;
color: #2866B1 !important;
font: bold 12px Arial, Helvetica, sans-serif !important;
text-decoration: none;
padding: 5px 0 5px
}
a:hover:visted:link {
color: #2866B1 !important;
font: bold 12px Arial, Helvetica, sans-serif !important;
text-decoration: none;
padding: 5px 0 5px
}
.product-content {
float: left;
border: 1px solid #ccc;
width: 664px;
margin-left: 300px
}
.prod-box {
width: 644px;
border-bottom: 1px solid #ccc;
float: left;
clear: both;
margin: 0px 0px 10px 13px;
min-height: 200px;
}
.prod-img-box {
overflow: hidden;
margin-top: 20px;
float: right;
position: absolute;
}
.prod-text-box {
width: 272px;
position: relative;
float: right;
clear: both;
}
.prod-title {
font-size: 26px;
color: #00337a;
line-height: 30px;
text-align: left;
padding-top: 10px;
clear: both;
}
.prod-cta {
color: #2866B1 !important;
font: bold 12px Arial, Helvetica, sans-serif !important;
text-decoration: none;
padding: 5px 0 5px;
clear: both;
}
</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <!-- IE is not seeing HTML5 tags so I added this to fix that --> <!--[if lt IE 9]> <script> document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('figure');
document.createElement('figcaption');
document.createElement('footer');
</script> <![endif]-->
<div id="main-container">
<div id="header"><img src="header.png" width="961px" height="144px"></div>
<div class="top-container">save up to <span class="red-text">25% </span>on orders over <span class="red-text">$249</span> + get free shipping when you order online.<span class="reg-text"> enter code:</span> ALL25H <span class="reg-text">click to apply ►</span></div>
<div id="content-container">
<div class="left-container">
<!-- Left Navigation -->
<div class="left-nav">
<div class="left-nav-head">Head Protection</div>
<ul>
<li>Hard Hats</li>
<li>Bump Caps</li>
<li>Welding Helmets</li>
<li>Face Sheilds</li>
<li>Winter Liners</li>
</ul>
</div>
<!-- Products Section -->
<div class="right-container">
<div class="product-content">
<ul>
<li>
<a name="hardhat"></a>
<div class="prod-box">
<div class="prod-text-box">
<div class="prod-title">Hard Hats</div>
Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
<div class="prod-cta">Shop Bump Caps<span>►</span></div>
</div>
<div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
</div>
</li>
<li>
<a name="bumpcaps"></a>
<div class="prod-box">
<div class="prod-text-box">
<div class="prod-title">Bump Caps</div>
Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
<div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>►</span></a></div>
</div>
<div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
</div>
</li>
<li>
<a name="bumpcaps"></a>
<div class="prod-box">
<div class="prod-text-box">
<div class="prod-title">Bump Caps</div>
Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
<div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>►</span></a></div>
</div>
<div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
</div>
</li>
<li>
<a name="bumpcaps"></a>
<div class="prod-box">
<div class="prod-text-box">
<div class="prod-title">Bump Caps</div>
Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
<div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>►</span></a></div>
</div>
<div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
</div>
</li>
<li>
<a name="bumpcaps"></a>
<div class="prod-box">
<div class="prod-text-box">
<div class="prod-title">Bump Caps</div>
Protect yourself from minor head and neck injuries with the comfort and reliability of bump caps. Choose from a variety of styles, colors, and adjustment types.
<div class="prod-cta"><a class="prod-cta" href="/browse/tn/Safety/Personal-Protective-Equipment/Hard-Hats-Bump-Caps/Bump-Caps?navid=12106709&rdrct=Bump+Caps&intcmp=BumpCaps_SafetyHeadProtectionStaticPage_CTA_April2016_v1">Shop Bump Caps<span>►</span></a></div>
</div>
<div class="prod-img-box"><img src="images/hardhat.jpg" alt="Hard Hats"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You currently have your markup set up like this:
<container>
<left-container>
<left-nav></left-nav>
<right-container></right-container>
</left-container>
</container>
It needs to be:
<container>
<left-container>
<left-nav></left-nav>
</left-container>
<right-container></right-container>
</container>
The left-container does not span the entire width of the container. From there you add
float: left;
to your left-nav and
float: right;
to your right-container and you should be all set!
What #kiaanabal said and a position absolute in your css on the left container would be quite useful too.
.left-container {
position: absolute;
width: 262px;
border: 1px solid #ccc;
margin: 20px 0px 0px 20px;
float: left;
overflow: auto;
}
http://codepen.io/Thrizian/pen/zBOZNE?editors=1100
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
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;
}
#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;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
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;
}
<!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>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
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: