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.
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.
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
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}
My CSS:
body
{
font-family:verdana;
line-height:1.5em;
color:#666;
font-size:0.8em;
}
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA
}
.objectAttributes
{
padding: 5px, 0px, 5px, 5px;
}
.whiteBoxWithBorder
{
padding:5px;
margin-right:5px;
background-color:#fff;
border: solid 1px #ccc;
float:left;
}
My HTML:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<meta name="GENERATOR" content="Microsoft® HTML Help Workshop 4.1">
<Title>Details</Title>
<link rel = "stylesheet" href="css.css" type = "text/css" />
</HEAD>
<BODY>
<div class = "objectAttributesOuter">
<div class="objectAttributes">
<div class="whiteBoxWithBorder">
GetType()
</div>
<div class="whiteBoxWithBorder">
Returns the type ...
</div>
</div>
</div>
</BODY>
</HTML>
The ideal render would be to have the "whiteBox" rendered inside the "objectAttributesOuter" but as you can see it overlaps. If I remove the float tag, then the 2 divs render inside the whiteBox but, do not display side by side.
Any ideas how I can have them display side by side within the "objectAttributesOuter" tag?
Check this out myFiddle
Use <div style="clear:both"></div>
Change objectAttributesOuter class as follow;
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA;
overflow:auto;
}
Try putting overflow:auto on .objectAttributes and see if that helps.
It would also help if you had widths on your container and the floating elements.
Put a float:left on objectAttributesOuter:
.objectAttributesOuter
{
border: 1px solid #999;
padding:6px;
margin:6px;
background-color:#EDEEFA;
float:left;
}
How do I get the p-tag with text "jon harris" beside the p-tag with text "Room 2"
I have tried float-combinations.. but there is something missing..i guess.
here the html code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twitter Avatar Scrolling</title>
<link rel="stylesheet" href="css/events.css" />
</head>
<body>
<div class="event">
<img src="images/red.jpg" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</body>
</html>
here is the css:
body {
font:13px/1.5 "helvetica neue", helvetica, arial, san-serif;
}
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
float:left;
}
.event p {
margin:0;
padding-left:60px;
font-weight: bold;
}
.patient-name {
color: #999999;
font-size: 9px;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here you go ... http://jsfiddle.net/2N6tu/
You just need to turn the first two <p> elements to inline elements.
Create a wrapper around those two P tags, set the width of those two P tags and add float: left to both e.g:
<div class="event">
<img src="images/red.jpg" alt="picture" />
<div class="event-wrapper">
<div class="event-inner-wrap">
<p class="room-number">Room 2</p>
<p class="patient-name">Jon Harris</p>
</div>
<div class="clear"></div>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
</div>
css
.clear {
clear: both;
}
.event-wrapper {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
float: left;
}
.event-inner-wrap {
width: 300px; /*** assuming that image is 80px, i didn't measure ***/
}
p.room-number {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the patient name is no bigger than the wrapper width **/
float: left;
}
p.patient-name {
width: 150px; /** set as whatever you like, just make sure this width plus the width of the room number is no bigger than the wrapper width **/
float: left;
}
Good luck.
Edit, because I saw that image you posted after I added this.
Edit again, because you don't need the extra clear: both; and I missed off 2 semi's.
Note, if you end up using Span tags instead of P the same above principle applies, however, the Span will require a display: block; on them if setting widths etc.
have you tried
.event p{display:inline;}