CSS - float causing undesired render - html

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;
}

Related

How to insert an image or geometric shape into WordPress homepage

I want to insert a little green square between words on my WordPress homepage. I wrote the html:
<div class="x"><center><p
style="border:10px; border.
style:solid;
border-color:#00ff00; padding:
0.0em; width: 2px; height:
2px;">
</p></center></div>
Pen: https://codepen.io/adsler/pen/KOXzPw
Site: http://4309.co.uk
Every other page I can access and edit but not the same for homepage.
Here you go.
go to your appearance, customise, add'text widget' then add the html code. If you were to add the css, you would need to go to --> appearance --> additional css
Have a great day!
Austin
It will be work
<div class="x"><center><p >Write Something<span style="border:10px; border-style:solid; border-color:#00ff00; padding: 0.0em; width: 2px; height: 2px;"></span> New</p></center></div>
Pen: https://codepen.io/shakil-shaikh/pen/xvXdEX
3 divs. Div one for top, div two for the square, and div three for bottom. If you need more explanation, I can elaborate.
Check below.
Box ‘one’ would be where text one goes, ‘center’ is where you would style the geometric shape, and ‘box2’ is where the second string of text will go.
When I get to my computer I’ll see if I can write out the full code for you to use.
<div id=box1></>
<div id=center></>
<div id=box2></>
Is this what you want to accomplish?
<!doctype html>
<head>
<meta char="utf-8">
<title>box test</title>
<style>
#content {
margin:25px auto;
}
#text-1 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-bottom:10px;
}
#shape {
border:#000000 2px solid;
width:20%;
height:20%;
}
#text-3 {
border:#000000 2px solid;
width:20%;
height:20%;
margin-top:10px;
}
</style>
</head>
<body>
<div id=content>
<div id=text-1>text one</div>
<div id=shape>shape</div>
<div id=text-3>text two</div>
</div>
</body>
<html>
Does this work? the position property allows you to put your div's anywhere on the website. Just remember that the attribute allows for stacking. Just use the left/right/top/bottom attribute.
#container {
width:1000px;
}
#x {
position:absolute;
top:0px;
left:0px;
background-color:blue;
}
#center {
position:absolute;
top:0px;
left:150px;
}
#y {
position:absolute;
top:0px;
left:300px;
background-color:#ffff00;
}
<div id="container">
<div id="x">Write something</div>
<div id="center">middle</div>
<div id="y">New</div>
</div>

CSS- responsively centering logo in header with the name on it's sides

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.

Divs inside of wrapper div are not aligning properly

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.

Why Wont vh Work In Chrome, but It Works In Internet Explorer

So, I am using vh, and, to my knowledge, it is 1 percent the view height of the page. It should work like percentages, but for borders and possibly other things. In Chrome, though, it wont work and leaves white space at the bottom of the Web page. Here is what I am using:
div /*It most be any element I'm just using div for an example*/
{
border:.5vh solid red;
}
I am asking this because Chrome (being the frustrating piece of work it is) doesn't convert .1vh to .1% like like internet explorer does and I'm left with white space at the bottom. Here is what I'm working on:
HTML:
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<title>Bradley's Website (Me)</title>
<link rel="stylesheet" href="personalWeb1.css">
<meta charset="UTF-8"/>
<meta name="description" content="My personal website"/>
<meta name="keywords" content="Brad,Website,Personal,Information"/>
<meta name="author" content="Bradley William Elko"/>
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div class="div01">
<h1 class="h101"><a class="a00p5" href="personalWeb1.html" style="text-decoration:none">Bradley's Website</a></h1>
</div>
<div class="div02">
<h2 class="h201">
<a class="a01" href="personalWeb2.html" style="text-decoration:none">My Band</a>
<a class="a01" href="personalWeb3.html" style="text-decoration:none">My Ideas</a>
</h2>
</div>
<div class="div03">
<h2 class="h202">About Me</h2>
</div>
<div class="div04">
<div class="div05">
<p>Date: 10/4/2016 (Latest Update)</p>
<blockquote>
Summary:
<br/>
<br/>
Welcome to my personal website! I am Bradley William Elko, and I am from Brunswick Ohio. I am currently attending MCCC (Medina County Carrer Center). I am taking SEWD1 (a coding class at MCCC). I always had an interest in coding. I am glad to be making my own personal website!
</blockquote>
</div>
</div>
</body>
CSS:
a.a00p5
{
color:#950f0f;
padding-left:1.9px;
}
a.a00p5:hover
{
color:red;
}
a.a00p5:active
{
color:#ffffff;
background-color:#B6B2AE;
}
a.a01
{
color:#950f0f;
border-left:.3vh solid #950f0f;
border-right:.3vh solid #950f0f;
margin-left:1%;
margin-right:1%;
}
a.a02,a.a03,a.a04
{
color:#ffffff;
}
a.a02:hover,a.a02:active
{
color:#3b5998;
}
a.a03:hover,a.a03:active
{
color:#00aced;
}
a.a04:hover,a.a04:active
{
color:#bb0000;
}
.address01
{
text-align:center;
}
body{
overflow:hidden;
margin:0px;
}
div.div01
{
position:relative;
text-align:center;
height:14.3%;
width:100%;
font-family:Arial, Helvetica, sans-serif;
background-color:#73778c;
border-top:.4vh solid #950f0f;
}
div.div02
{
border-top:.3vh solid #950f0f;
border-bottom:.3vh solid #950f0f;
position:relative;
height:5%;
width:100%;
background-color:#73778c;
text-align:center;
}
div.div03
{
position:relative;
background-color:#73778c;
height:10%;
border-bottom:.3vh solid #950f0f;
}
div.div04
{
position:relative;
height:69%;
width:100%;
background-color:#73778c;
border-bottom:.4vh solid #950f0f;
}
div.div05
{
position:relative;
width:50%;
height:80%;
margin-left:auto;
margin-right:auto;
padding-left:1%;
background-color:#b6b2ae;
overflow-y:scroll;
}
h1.h101
{
color:#950f0f;
font-size:6.75vh;
margin:0%;
}
h2.h201
{
text-align:center;
font-size:4.5vh;
margin:0%;
padding:0%;
}
h2.h201,a:hover
{
color:red;
}
h2.h201,a:active
{
color:white;
}
h2.h202
{
font-size:5.2vh;
color:#950f0f;
margin:0px;
text-align:center;
}
img.img01
{
width:100px;
height:100px;
}
img.img02
{
width:100px;
height:81.2px;
}
img.img03
{
width:100px;
height:100px;
vertical-align: bottom;
}
table
{
border:2px solid #950f0f;
margin-top:3%;
margin-bottom:9%;
margin-left:auto;
margin-right:auto;
}
td:active
{
background-color:#ffffff;
}
td.td01
{
border:2px solid #3b5998;
padding-top:35.5px;
padding-bottom:36.5px;
}
td.td02
{
border:2px solid #00aced;
padding-top:35.5px;
padding-bottom:36.5px;
}
td.td03
{
border:2px solid #bb0000;
padding-top:35.5px;
padding-bottom:36.5px;
}
th.th01
{
border:2px solid #3b5998;
background-color:#ffffff;
}
th.th02
{
border:2px solid #00aced;
background-color:#ffffff;
}
th.th03
{
border:2px solid #bb0000;
background-color:#ffffff;
}
If you look closely at the bottom of the Web page (on Chrome), you can see white space at the bottom of the page. You have the really look at the bottom to see it. This doesn't happen on Internet Explorer (I'm using a pre-installed version of IE on windows ten, but I don't know what version). If you don't get the same problem, I get I'm sorry that this wasted your time, but I can show you screenshot proof if you really want it.
Things to note:
I have two other pages so there maybe be other things in my css text document that you may encounter. Ignore it.
If percentages don't work than is there another way to simulate them for borders in Chrome?
Thank you for for your time!
In Chrome, border widths are rounded down to the nearest pixel. Depending on the calculated results of your vh border widths, the sum of the heights and border widths of all your elements may be less than 100%.
You can solve this by applying box-sizing: border-box to all of your elements. This will ensure borders do not change the dimensions of your elements, so you'd only have to ensure your <div> heights add to 100%.
* {
box-sizing: border-box;
}
However, you choose to do it, never use fixed heights if you can avoid it. Let CSS handle the dimensions naturally.

Adding a 10px padding or margin to a div makes no difference

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/