I've looked around StackOverflow for some solutions, and so far none of them are working.
I'm trying to get my span to wrap tightly around its interior divs, but it always goes just a little bit wider than the divs inside. I've tried the different DISPLAY, FLOAT, MARGIN, and PADDING properties with no luck.
#column1, #column2, #column3
{
display:block;
float:left;
width:33%;
height:100vh;
text-align:center;
border: 1px solid black;
}
#weather_header
{
width:70%;
border: 5px outset skyblue;
background-color: skyblue;
color: white;
}
#weather_body
{
width:70%;
border: 5px inset skyblue;
background-color: lightblue;
color: black;
}
#clock_header
{
width:70%;
border: 5px outset skyblue;
background-color: skyblue;
color: white;
}
#clock_body
{
width:70%;
border: 5px inset skyblue;
background-color: lightblue;
color: black;
}
div.widget_box
{
display: inline-block;
border: 1px solid black;
}
div.widget_header
{
float:left;
text-align:left;
padding: 5px 10px;
display:inline-block;
border-radius:8px 8px 0 0;
font-weight:bold;
}
div.widget_body
{
float: left;
padding: 10px;
display: inline-block;
border-radius: 0 0 8px 8px;
text-align:center;
margin: 0 auto;
}
body {height:100vh;}
html {height:100vh;}
Basically the widget_box class holds the header and body classes. I just want the span's width to match the width of the div boxes (which will contain widgets of varying size).
Any help you could offer would be most appreciated!
Edit: HTML Code
<html>
<head>
<title>Dashboard </title>
<!--Importing JQuery into page-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<!--Importing Stylesheet into page-->
<link type="text/css" href="dashboard_stylesheet.css" rel="stylesheet"></link>
</head>
<body bgcolor = "white">
<div id="column1">
<div class="widget_box">
<div class="widget_header" id="weather_header">Weather</div>
<div class="widget_body" id="weather_body">
<script type="text/javascript" src="http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp?partner=netweather&tStyle=whteYell&logo=1&zipcode=73127&lang=eng&size=9&theme=blue&metric=0&target=_self"></script>
</div>
</div>
<div class="widget_box">
<div class="widget_header" id="clock_header">World Clock</div>
<div class="widget_body" id="clock_body">
<div align="center" style="margin:15px 0px 0px 0px;background:#000000;width:200px;padding:12px">
<noscript>
<div align="center" style="width:140px;border:1px solid #ccc;background:#fff ;color: #fff ;font-weight:bold">
<a style="padding:2px 1px;margin:2px 1px;font-size:12px;line-height:16px;font-family:arial;text-decoration:none;color:#000" href="http://localtimes.info">World Time </a>
</div>
</noscript>
<script type="text/javascript" src="http://localtimes.info/world_clock.php?widget_number=11002&cp3_Hex=FF0000&cp2_Hex=000000&cp1_Hex=FFFFFF"></script>
</div>
</div>
</div>
</div>
<div id="column2">Column 2</div>
<div id="column3">Column 3</div>
</body>
</html>
Ok. First, to answer your question, you're problem is here: span.widget_box{margin:3px;}
do this instead: http://jsfiddle.net/n6fpS/
span.widget_box{
display: inline-block;
margin: 0;
border: 1px solid black;
}
Second, as #danielepolencic said, its poorly structured to put divs inside of spans for the reasons he mentioned.
Is this what you're going for? http://jsfiddle.net/n6fpS/2/ If not, I think you should post another question and consider linking to an image representation or wire frame of your end goal. It seems your asking a separate question now and that you're struggling with a fundamental understanding of CSS. I think it would benefit you to to spend an hour going through an online tutorial like this: http://www.tutorialspoint.com/css/index.htm. Also, I'd recommend inspecting your code with firebug or chrome developer tools (right click, inspect element) as it allows you to make changes in real time and see how things work.
Related
I'm looking to find out how to add another box inside my box which would be faded to act as a title bar for that specific box (If that makes sense)!
So basically, in the SOCIALBOX I'm looking to get a sub-faded bar at the top inside which would act as a title bar.
After a few comments of people saying they're not sure what I mean, I created a quick image in photoshop to act as some reference point.
Code Snippet:
body {
background: url("../images/backgroundimage.jpg") repeat 0 0;
}
/* CSS MENU BAR CODE GOES HERE */
#menubar {
width: 98.5%;
height: 40px;
background-color: #000000;
position: fixed;
border: 2px solid #ffffff;
}
.inside_text {
color: #FFFFFF;
float: right;
margin: 11px 7px 0 0;
}
.inside_text2 {
color: #FFFFFF;
float: left;
margin: 11px 0 0 7px;
}
/* CSS SOCIALBOX (RIGHT) GOES HERE */
#socialbox {
width: 40%;
height: 40%;
position: relative;
float: right;
margin: 0 8px 0 0;
background-color: #000000;
border: 2px solid #126b72;
}
<div id="menubar">
<div class="inside_text">
PLACEHOLDER TEXT
</div>
<div class="inside_text2">
PLACEHOLDER TEXT
</div>
</div>
<br />
<br />
<br />
<div id="socialbox">
</div>
So you are asking for a faded line within SOCIALBOX div, to serve as underline for a title?
If thats correct create another class
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
}
position with margin-left & margin-top values inside that class based on where you want it within SOCIALBOX.
for example:
.title-bar
{
border-bottom:3px;
solid black;
opacity:0.3;
margin-left:50px;
margin-top:30px;
float:left;
}
create a:
<div class="title-bar"></div>
and place that inside
<div id="socialbox"></div>
BTW make it a habit to use float:left when positioning divs with CSS, try to avoid position:absolute or fixed, unless absolutely necessary. It just comes out cleaner this way.
I'm currently following a UDemy course where the instructor is teaching us Full Stack Development from scratch. Problem is, he made a lot of mistakes that I needed to improvise on like adding <span> next to sign in, instead of his idea of a <p> and my screenshots of the BBC Logo and Sign In button needed it's height modified in order for them to fit properly in that small nav bar.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Wadson's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial, sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 45px;
color: #fff;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
}
#logodiv {
padding-top: 15px;
float: left;
border-right: 1px solid #990000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
position: relative;
width: 200px;
height: 45px;
float: left;
}
#signindiv img {
position: relative;
top: 15px;
left: 15px;
}
#signintext {
position: relative;
top: 10px;
left: 25px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin: 0px;
padding: 0px;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
padding: 15px 20px 0px 20px
}
</style>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/logo.png" height="25px" />
</div>
<div id="signindiv">
<img class="signinhead" src="images/signin.png" height="20px"/><span id="signintext">Sign In</span>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /#container -->
</body>
</html>
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
There is a few things wrong with the code here, I'm not going to go too deep into structure or how using a CSS framework is a great option for beginners(I highly recommend bootstrap and following a tutorial to understand how they use each component as well following a up to date CSS tutorial).
A few quick pointers to fix the problems your border was going past the #topbar because the list items were being stacked vertically instead of horizontally. This was fixed by adding float: right; to the #topmenudiv li. You need to offset the padding you have on your list item elements by setting a height - the padding in this case 30px.
Check the updated version below and always try to include a codepen or jsfiddle with your answer whenever possible.
http://codepen.io/anon/pen/VLEENL
As I understand your question:
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
Use the CSS property outline When you apply it to a class, tag, or id of an element(s), it looks like the CSS property border. The difference between border and outline is that outline will not affect the area surrounding the element(s) which mikes it perfect for seeing your divs and their actual position.
Place this css under your body rule (ie body {...}) in the <style> block:
CSS
/* body * { outline: 1px solid blue; } */ /* Uncomment to see all elements */
.green { outline: 2px dashed green } /* Highlight in green */
.black { outline: 3px dotted #000; } /* Highlight in black */
.yellow { outline: 4px double #fc0; } /* Highlight in yellow */
In order to handle padding and margins easier put the following at the top of your CSS:
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
This will unify all of the elements under one box-sizing rule. An element's dimensions, padding, and border are included to the element's content. Normally by default (content-box), only width and height are considered. See this for more on box-sizing
I have been trying to put two divs next to each other, but I cannot find an effective way to do it. I want to set a sidebar menu next to an article. I tried floating one to the left, but all it does is create a huge gap between the two.
This is my code:
CSS
div#divone {
float:left;
margin-left: 10%;
border: 2px outset white;
padding; 10px 10px 10px 10px;
font-family; Times New Roman;
}
div#divtwo {
float:right;
margin-left: .1%;
border: 2px outset white;
padding; 10px 10px 10px 10px;
font-family; Times New Roman;
}
HTML
<div id="divone">
<p>word</p>
</div>
<div id="divtwo">
<p>word</p>
</div>
You can use float:left on the divs to bring them both together, and while you're doing that, why not put the common styles in one place, to make your CSS a little 'cleaner' ?
div.floated {
float: left;
border: 2px outset white;
padding: 10px 10px 10px 10px;
font-family: Times New Roman;
}
div#divone {
margin-left: 10%;
}
div#divtwo {
margin-left: .1%;
}
<body>
<div class="floated" id="divone">
<p>word</p>
</div>
<div class="floated" id="divtwo">
<p>word</p>
</div>
</body>
here's a jsfiddle to represent it if you want to play around with the code: http://jsfiddle.net/ya3L75xd/
You should put #divTwo { float:left }
Remove the float: left; on your div#divone.
Put the div#divtwo before the div#divone in the html.
Here's the solution:
http://jsfiddle.net/nk2oLvgy/1/
float:left; for both <div> and they are next to each other.
this is my html
<div class="logoArea">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
this is my css
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.titleClass {
color: #343434;
font-weight: normal;
font-family: 'Ultra', sans-serif;
font-size: 36px;
line-height: 42px;
text-transform: uppercase;
text-shadow: 0 2px white, 0 3px #777;
margin:auto;
background-color:red;
width:40%;
top:10px;
}
This is what the result:
I want it to be this:
Set the image float:left; and the text display:inline-block; and the .logoArea text-align:center;.
Working fiddle
There are few ways to solve this. Here is one with minimal changes to your existing styling.
.logoArea img {
float: left;
}
Usually it requires additional changes in the code for actual centering in the parent window, but it seems to go well with the other styles you already have.
EDIT
Looking again at the result, I'm having second thoughts. My solution is good only for non-dynamic elements (elements that won't change dynamically but remain the same). Since it appears to be a header and therefore a relatively static element, my solution may still be valid, only with adding a required amount of padding-top to the center div. I don't know how much because in your example you used a very large font-size and I have no idea of the size of the image.
You can use CSS vertical-align:middle if the element is td (not div) or try this trick: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
Try using:
<div class="logoArea" style="display:table-cell; vertical-align:middle">
<img src="images/oifcoman-logo.jpg"/>
<div class="titleClass">Call Center Dashboard</div>
</div>
Try this:
HTML:
<div class="logoArea">
<img src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/>
<div class="titleClass">Call Center Dashboard</div>
<div style='clear:both;'></div> </div>
CSS:
.logoArea {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}
JavaScript (must include jQuery first)
$(document).ready(function(){
var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
var pTop=((h-ch)/2)+'px';
$('.logoArea .titleClass').css('paddingTop',pTop);
});
Demo: http://jsfiddle.net/zcAjq/
I need to draw a horizontal line after some block, and I have three ways to do it:
1) Define a class h_line and add css features to it, like
#css
.hline { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <div class="h_line"></div>
2) Use hr tag
#css
hr { width:100%; height:1px; background: #fff }
#html
<div class="block_1">Lorem</div> <hr />
3) use it like a after pseudoclass
#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }
#html
<div class="block_1 h_line">Lorem</div>
Which way is the most practical?
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
Here is how html5boilerplate does it:
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
I'd go for semantic markup, use an <hr/>.
Unless it's just a border what you want, then you can use a combination of padding, border and margin, to get the desired bound.
.line {
width: 53px;
height: 0;
border: 1px solid #C4C4C4;
margin: 3px;
display:inline-block;
}
<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>
In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the
<hr> tag represents a horizontal rule.
http://www.w3schools.com/tags/tag_hr.asp
So after definition, I would prefer <hr>
If you really want a thematic break, by all means use the <hr> tag.
If you just want a design line, you could use something like the css class
.hline-bottom {
padding-bottom: 10px;
border-bottom: 2px solid #000; /* whichever color you prefer */
}
and use it like
<div class="block_1 hline-bottom">Cheese</div>
I wanted a long dash like line, so I used this.
.dash{
border: 1px solid red;
width: 120px;
height: 0px;
}
<div class="dash"></div>
My simple solution is to style hr with css to have zero top & bottom margins, zero border, 1 pixel height and contrasting background color.
This can be done by setting the style directly or by defining a class, for example, like:
.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}
it is depends on requirement , but many developers suggestions is to make your code as simple as possible .
so, go with simple "hr" tag
and CSS code for that.
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
<div>Hello</div>
<hr/>
<div>World</div>
emphasized text
This is relatively simple example and worked for me.
hr {
width: 70%;
margin-left: auto;
margin-right: auto;
}
Resource: https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html