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.
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.
between these two p elements.
I checked the box model and there is no margin set.
Here it the fiddle and code -
https://jsfiddle.net/f3m2apgy/
<body>
<style>
#container{
display: inline-block;
width: 500px;
border: solid 1px;
text-align: center;
}
#si_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#su_but{
cursor: pointer;
padding: 14px 14px;
font-size: 14px;
border: solid 1px;
margin: 0px;
display: inline-block;
}
#hold_button{
display: inline-block;
border: solid 1px;
text-align: center;
margin: 0 auto;
padding: 0px;
}
</style>
<div id="container">
<divi id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p>
<p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
</body>
You have newline after the first </p> and indenting spaces before the second <p>.
If you put <p> elements in a line, the space will disappear.
<div id="container">
<div id="hold_button">
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
</div>
</div>
And, <divi> should be typo of <div>.
If you put the <p> elements on a single line in your code, the gap is eliminated.
<p id='si_but' class='blue_but radius_left medium_white'>SignIn</p><p id='su_but' class='orange_but radius_right medium_white'>SignUp</p>
DEMO: https://jsfiddle.net/f3m2apgy/6/
It's because all inline-block elements have a space to the left if seperated by spaces in the HTML code. To fix it, you should change them to <ul> or <div> elements, or add a negative margin to one of them.
Adding margin-left: -5px; to #su_but would also fix this, although it is a little hacky.
The usual way to fix the whitespace problems coming up with display: inline-block; is to set the parent element's font-size to zero. Of course the consequence is that you will have to re-set the necessary font-size on the child elements - which you already do in your example, so
#hold_button { font-size: 0; }
fixes your problem already.
https://jsfiddle.net/f3m2apgy/7/
At the moment, I have page headings which I want to style like this:
<div class="page_header">Categories</div>
My style looks like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
But I have been asked to add a small image to the left of the text.
So, I could go an edit every page header:
<div class="page_header"><img src="http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png" />Categories</div>
But I was hoping I could edit the CSS to accomplish this for me. Is there a way I can add an image to the CSS, left of the text (With a (missing) gap between the image and the text)?
I have attempted the ::before in the css (New to me, so I am doing something wrong), like this:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
}
.page_header::before{
content: url('~/images/pushpin.png');
}
But all that happens is I get a huge gap before the heading. But if I use http:// to reference the image, it works. Using ~\images\myimage.png fails.
you try with code below maybe can help you:
.page_header {
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
padding-bottom: 10px;
position:relative;
padding: 30px 0 0 120px;
}
.page_header::before{
position:absolute;
left:0;
top:0;
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
Working Demo
Here's how you can style all headers with the same image:
.page_header {
background: url('http://www.healthylivingjunkie.com/wp-content/uploads/2014/10/bulletPoints.png') left center no-repeat;
background-size: 14px;
font-family: markerfelt-thin-webfont;
text-shadow: 1px 1px 2px #000000;
font-size: x-large;
color: #bbbb75;
margin-bottom: 10px;
padding-left: 20px;
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
There's a few ways to achieve this. Either by use of the :before selector or by setting the background of the div to your image and pushing the text across using padding.
You could set the background image of the div and pad the left side to move the text over
padding-left:120px; // width of image + spacing
background: url("http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png") no-repeat;
Yeah, you don't have to go to code part and you can do this with css using pseudo element before as you have to insert it before the element.
.page_header:before{
content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
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.
I'm working on a personal project, but I'm having some difficulty with a div, which has some styling that I can't seem to get around. It's a thin strip at the top of my user interface, where users have a few controls over what's shown on the screen. Pretty important to keep around (so deleting it isn't an option). In case it helps at all, I am using Eric Meyer's CSS Reset as a normalizer.
My problem is that the div element seems to have some intrinsic margin or padding that I can't seem to work around in my css. I've included a photo here for reference; the div is in green.
I need to make that green div element thinner. It would help the layout a lot if I could move it closer to the top of the page. If you have any ideas or see something that I've missed, I would appreciate the help.
I'm also including the html code for that content as follows:
<div class="new_entry_control_container">
<p>You have <span class="credits">33 Credits</span> remaining.
<span class="button">Add More Credits</span>
<span class="button">Add More Items to Study List</span>
<span class="pagination">< 1 | 2 | 3 ></span>
</p>
</div>
As well as the CSS that applies here:
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;}
div.new_entry_control_container p {
text-align: center;}
.credits {
color: #ffd400;}
.button {
background-color: #ffd400;
color: #3a0091;
border: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 1px 8px 4px 8px;
margin: 10px 0px 0px 3px;}
.pagination {
margin-left: 25px;
font-size: 17px;}
Not sure if it's caused by the padding of parent element of that green bar. A workaround would be using negative "margin-top". And to make it thinner (assuming there would only be one line in that bar), use "height" combined with "line-height".
So the css might look like this
div.new_entry_control_container {
background-color: green;
max-width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
height: 18px; line-height: 18px;
}
Hope that helps.
Try:
div.new_entry_control_container{
padding:0;
/* more CSS here */
}
.credits{
padding:0; margin:0;
/* other CSS here */
}