My window is split into 3 parts, the header, Section and footer. the section part is not being fully sized in the browser, instead it's cut off half way down the page.
I have tried changing the height attribute to 100% or 'Auto' but it doesn't seem to help. I've included the entire code as I am not sure what affects the sizing.
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-image: url("53.12-Day-1600x1200.jpg");
color:white;
text-align:left;
padding:5px;
width:100%;
height:20%;
}
nav {
line-height:20px;
background-color:#B0D4DB;
height:auto;
max-height:initial;
width:10%;
float:left;
color:;
}
**
*section {
width:90%;
background-color:#E9E9E9;
float:left;
text-align:center;
color: black;
height:auto;
max-height:initial;
font-family:courier;***
}
footer {
background-color:#CDCDCD;
color:black;
clear:both;
text-align:left;
width:100%;
height:10%;
}
</style>
</head>
<header>
<h1> Find Break </h1>
</header>
<body>
<nav>
<p>About</p><br>
<p>Search Break</p><br>
<p>Contact us</p>
</nav>
<section>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<style type="text/css">
#tfnewsearch{
float:center;
padding:20px;
}
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid #0076a3;
border-right:0px;
border-top-left: 5px 5px;
border-bottom-left: 5px 5px;
}
.tfbutton {
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
</style>
<br>
<p1> Search for your favourite surf spots below </p1>
<br>
<div id="tfheader">
<form id="tfnewsearch" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="21" maxlength="20"><input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<!-- Google Map -->
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script>
<div style='overflow:hidden;height:200x;width:500px;'>
<div id='gmap_canvas' style='height:200px;width:500px;'></div>
<div><small>embed google maps</small></div>
<div><small>auto huren</small></div>
<style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
</div>
<script type='text/javascript'>function init_map(){var myOptions = {zoom:11,center:new google.maps.LatLng(-33.598169871799726,151.3341166752075),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-33.598169871799726,151.3341166752075)});infowindow = new google.maps.InfoWindow({content:'<strong>Title</strong><br>Palm Beach, NSW<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
</section>
</body>
<footer> <small>© Copyright 2101, PSX </small> </footer>
</html>
To make the section 100% in height, you'll need the parent to be 100% height too. In other words, your body has to be set at height:100% with the section set as the same.
You could also use vh (vertical height) units like so, which wouldn't require the 100% height on the body
section{
height:100vh;
}
Any time you have a float:_____, the floated element loses its height. It is visible, but it is as if it has zero height. Stuff will overwrite it -- sizing does not work.
So what to do?
There is a simple fix. Ensure the floated element is inside another container (a div, usually) and style that container overflow:hidden or overflow:auto. There are other solutions that involve creating pseudo-elements, and those work great and are a bit "more elegant", but this method works just fine.
References:
Customising Insightly HTML contact form (aligned, spaced fields)
CSS container div not getting height
Align <ul> center with others
For a percentage-based height setting to work for an element, its parent element needs to have a height definition. In your case, that's <body>, so you need to add
body {
height: 100%;
}
...and don't float it - it will loose its height setting if you do
Related
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
I need to know why I cannot get my sidebar inside of my wrapper div to stay on the right and my main_content div to stay on the left side of my wrapper.
I would like the following model:
WRAPPER DIV:
______________________________
{ / sidebar }
{ / div }
{ m_c div / }
{ / }
{ __________________/__________}
1) What code am I missing that does not let me align the divs inside of the wrapper?
2) Also, I drew a border around each div so that I can visualize them with ease; now why is my main_content div disappear whenever it comes across text? If you run it in fiddle you can see what i'm talking about. There are holes in the border near the text; how can I make that disappear?
Thank you.
/*Comment example - created 10/12/16*/
* {
font-family: 'Libre Franklin', sans-serif;
background-color: rgb(155, 155, 155);
}
.wrapper { /*black*/
width:960px;
min-height: 700px;
border: 1px solid rgb(0,0,0);
margin: 0 auto;
display:inline-block;
}
.main_content{ /*Green*/
width: 730px;
min-height: inherit;
border: 2px solid rgb(222, 26, 26);
float:left;
}
.sidebar_one{ /*White*/
width: 230px;
min-height:inherit;
border: 1px solid rgb(255,255,255);
float:right;
position:absolute;
color:rgb(242, 70, 16);
overflow:hidden;
}
h2 {
position:relative;
left:5px;
}
h5 {
position:relative;
left:5px;
}
p {
position:relative;
left:5px;
}
<!DOCTYPE html>
<!--Created 10/12/16 ///// ideas: emrisk-->
<html>
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--Added external Stylesheet-->
<script src="script.js"></script>
<!--Added external javascript file-->
</head>
<body>
<div class="wrapper">
<div class="main_content">
<h2>TEST </h2>
<!-- END OF H2 -->
<h5>random test standard of web-based and cloud-based server systems since 2007.
</h5>
<!-- END OF H5 -->
<p>
Our clients have trusted our team for almost a decade and throughout the years we have proven our worth over and over again.
</p>
<!-- END OF P -->
</div>
<!-- END OF MAIN_CONTENT -->
<div class="sidebar_one">
Test
</div>
<!-- END OF SIDEBAR_ONE -->
</div>
<!-- END OF wrapper -->
</body>
</html>
Thank you.
Remove position:absolute from below and decrease the width of sidebar_one:-
.sidebar_one{ /*White*/
width: 210px;
min-height:inherit;
border: 1px solid rgb(255,255,255);
float:right;
color:rgb(242, 70, 16);
overflow:hidden;
}
Try flexbox. There's an awesome tool for discovering how it works here, and it completely eliminates the nastiness that is involved in CSS layout.
How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.
Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.
Stylistic notes (unrelated to the problem):
border-radius: 0 12px 12px 0; means the same thing as
border-top-right-radius:12px;
border-bottom-right-radius:12px;
but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.
The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
In the following scenario, I'm trying to add a 10px margin or padding to the div that is inside, which has class "url", but nothing works for it.
I can see that giving it a margin of 120px does the job.
How do I do something like what I'm attempting to do, and still have a 10px margin or padding to the div with class url?
Also, the div with class status will not appear aligned horizontally.
I don't mind anything being changed, as long as it'll work. Can you help? I gave up trying.
Fiddle
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Dev</title>
<style type="text/css">
.outer {
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
font-size: 12px;
border:1px solid #e1e1e8;
background:#f7f7f9;
}
.site {
float:left;
width:100px;
padding:10px;
border-right:1px solid #ECECF0;
background:#fbfbfc;
color:#BEBEC5;
}
.url {
padding:10px 10px 10px 10px;
color:#D14;
text-shadow:0 1px 0 #fff;
}
.status {
float:right;
padding:3px;
background:#F5f5f5;
border:1px solid #ececF0;
color:#D14;
text-shadow:0 1px 0 #fff;
font-size:10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="site">site</div>
<div class="url">http://www.google.com
<div class="status">active</div>
</div>
</div>
</body>
</html>
The margin-left not applied because you have not add float:left for the url div. So that it is started it is calculation from left position zero onwards. It works for you margin-left:120px because the first div width + padding is 120px.
I have made other changes to align your active box to right, you can check it in my fiddle.
You have to clear your float div using clear:both
HTML
<div class="outer">
<div class="site">site</div>
<div class="url">Need some 10px space here from the right
<div class="status">active</div>
</div>
<div style="clear:both"></div>
</div>
CSS
.url {
float:left;
padding:10px 10px 10px 10px;
color:#D14;
text-shadow:0 1px 0 #fff;
margin-left:20px;
}
DEMO
You can wrap your .url inner content in a div and add your padding to it. Something like .inner-url.
<div class="outer">
<div class="site">site</div>
<div class="url"><div class="inner-url">Need some 10px space here from the right</div>
<div class="status">active</div>
</div>
.inner-url{
padding: 0 10px 0 10px;
display: inline-block;
}
http://jsfiddle.net/1kha7xkb/9/
or
Just add margin-right to your .site class
http://jsfiddle.net/1kha7xkb/5/
The code:
HTML:
<div id = "LeftDiv">
<p class = "hdr">ADVANCED SEARCH:</p>
<div class = "LeftItem">
<form>
<p style="margin:0;padding: 10px 0;">Weird Space above this</p>
<input type = "text" name = "search" />
<input type = "submit" value = "Go" />
</form>
<br />
</div>
<br />
...There are some more (like a vertical navigation bar,
which also has this gap between the header and the navigation bar)
CSS:
#LeftDiv
{
float: left;
width: 20%;
text-align: center;
color: #fff;
}
.LeftItem
{
background: #000 url("") no-repeat;
}
.hdr
{
text-transform: uppercase;
font-weight: bold;
background: url("header.png") no-repeat;
padding: 10px 0;
margin: 0;
}
The weird thing is, this happens in Firefox, but not in Chrome. Also, this space disappears when I zoom when using Firefox.
I'm not really sure why this happened. Is this because the <p> is not inside the 'LeftItem' div?
try adding no margin/padding for every element:
*
{
padding:0;
margin:0;
}
EDIT REGARDING YOUR COMMENTS:
You don't want to use padding to fit your image in. What you do is get your image width and height, and do this:
.hdr
{
width:100px;
height:100px;
display:block;
background:url("header.png") no-repeat;
}
.hdr span
{
font-weight:bold;
text-transform: uppercase;
padding: 6px auto;
}
(instead of 100px, use actual size, and 6px is a wide guess)
ANd then use html:
<div class="hdr"><span>advanced search</span></div>