I am new to css and am currently trying to split the screen in two parts and place text on the left and the right side. However, for some reason the right "box" doesn't cover the whole right part of the screen, only like 200-300 px...
JSFiddle:
https://jsfiddle.net/19mw8hzL/
The black text should reach to the right side of the screen.
<div class="wrapper">
<div id="one">
<p class="w-text-1">Strategy</p>
</div>
<div id="two">
<ul>
<li>Visioning</li>
<li>Strategic Analysis</li>
<li>Strategy Formulation</li>
<li>Business Model Innovation</li>
<li>Financial Modeling</li>
</ul>
</div>
</div>
Flexbox can do that.
.w-text-1 {
font-family: 'Garamond', serif;
color: rgba(163, 42, 46, 1);
font-size: 35px;
}
.wrapper {
display: flex;
}
.wrapper div {
color: #fff;
}
#one {
width: 20%;
}
#two {
flex: 1;
background: lightblue;
text-align: right;
}
#two a {
text-decoration: none;
font-family: 'Gotham', sans-serif;
font-size: 17px;
color: #000;
border: 1px solid grey;
}
#two ul {
overflow: hidden;
padding: 0;
}
#two li {
display: inline-block;
margin: 5px 0 0 0;
}
<div class="wrapper">
<div id="one">
<p class="w-text-1">Strategy</p>
</div>
<div id="two">
<ul>
<li>Visioning
</li>
<li>Strategic Analysis
</li>
<li>Strategy Formulation
</li>
<li>Business Model Innovation
</li>
<li>Financial Modeling
</li>
</ul>
</div>
</div>
Change your css for #two, to add in the 20% of #one, to make 100%:
#two {
float: left;
overflow: hidden;
width: 76%; /* this is completing the width with the 4% padding */
padding-top: 17px;
padding-right: 4%;
}
Hi please modify these
Lets make the parent element as 100% and make the children div as 50% each
.wrapper {
width : 100%;
}
#one {
float:left;
width:50%;
}
width to 46% because we have given padding right as 4% so (46+4 = 50)
#two {
float: right;
width: 46%;
padding-top: 17px;
padding-right: 4%;
}
:)
*{
box-sizing: border-box;
}
This will remove padding as part of the width of all elements. Don't use '*' as a selector as it's quite heavy on the DOM.
#two {
width: 80%;
}
Because 20% + 80% = 100%
#two li {
display: inline-block;
}
This will add a width and a height to the li's
Related
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
I have 3 nav buttons at the top of a page. I set their width to 33% but noticed that the last one didn't fill all the space that it was supposed to, so I set it's width to 34% but it still didn't fix the issue.
If you go to http://shacktown.com and hover over Contact you will see that the right-most area of the button does not turn a lighter gray, and I also noticed that the border-radius attribute doesn't apply itself either.
The 3 .nav items are located inside of a #header item. Here is the respective CSS:
#banner, #header, #content {
margin: 2.5% 15% 2.5% 15%;
}
#header, #content {
border-radius: 0.375em;
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.nav {
height: 2em;
padding-top: 1.0em;
text-align: center;
color: #000000;
font-size: 1.2em;
float: left;
width: 33%;
cursor: pointer;
border-left: 0.1em solid #333333;
}
.nav:hover, .navSelected {
background-image: url('http://shacktown.com/engine/img/trans.png');
}
.navSelected {
cursor: default;
}
.nav:first-of-type {
border-radius: 0.375em 0 0 0.375em;
border-left: none;
}
.nav:last-of-type {
border-radius: 0 0.375em 0.375em 0;
width: 34%;
}
Any idea why it isn't filling up the whole space?
:last-of-type or :first-of-type css selectors are not meant to be working like this. In your case, this selectors will select the last "div" or first "div" in their parents.
So remove this line from html:
<div style="clear: both;"></div>
and change width of the class nav to %33.3
these will do the trick.
Change the rule for .nav to following:
.nav {
height: 2em;
padding: 1em 0 2.5em 0;
text-align: center;
color: #000;
font-size: 1.2em;
float: left;
cursor: pointer;
border-left: 0.1em solid #565656;
width: 33.33%;
box-sizing: border-box;
}
And add a new rule:
.nav:last-of-type:hover {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Remove the whitespace in your markup:
And this is the result you'll get.
there is no selector with only class only
CSS: How to say .class:last-of-type [classes, not elements!]
so you can do
set .nav as display:inline-block and remove clear div so that they are inline
here is the demo
.cont {
font-size: 0px; /* is added to remove whitespace from inline-block */
}
.cont div {
display: inline-block;
font-size: 16px;
}
.cont div:first-of-type,
.float div.test:first-of-type {
background: red;
}
.cont div:last-of-type,
.float div.test:last-of-type {
background: red;
}
.float .test {
float: left;
}
.float .clear {
clear: both;
}
<p>used inline-block instead of float</p>
<div class="cont">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
<p>with class and used float</p>
<div class="float">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
<div class="clear"></div>
</div>
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
If browser width is 1024 - everything is OK, but when I resize it to 600px - footer's background does not expand vertically and "Need help" and "Join us" sections which went below does not have a background color... How to increase footer's height automatically if resizing happens?
Currently it looks this way (I did "select ALL" on the page to show white text)
But I want footer height to expand to look like this:
Thanks in advance.
CSS
.footer {
color: white;
height: 200px;
background-color: #536571;
font-size: 18px;
}
.about, .contacts, .help, .join {
float: left;
margin-top: 15px;
margin-left: 50px;
}
.about {
margin-left: 100px;
}
.join {
max-width: 300px;
}
.copyright {
clear: both;
float: right;
margin-right: 20px;
}
.footer ul p {
font-size: 24px;
font-weight: bold;
}
.footer ul {
list-style: none;
}
HTML
<div class="footer">
<div class="about">
<ul>
<p>About</p>
<li>Team</li>
</ul>
</div>
<div class="contacts">
<ul>
<p>Contacts</p>
<li>info#site.com</li>
</ul>
</div>
<div class="help">
<ul>
<p>Need help?</p>
<li>FAQ</li>
</ul>
</div>
<div class="join">
<ul>
<p>Join us!</p>
<li>
Subscribe now and get a discount to our premium plan!
</li>
</ul>
</div>
<div class="copyright">(C) 2013 My Company</div>
</div>
The problem stems from the fact that floats are not contained by the footer. Try the following;
.footer {
/* height: 200px; removed to allow the footer to stretch */
overflow: hidden; /* a nice trick to contain floats */
}
http://jsfiddle.net/Hk26d/
I changed height to min-height AND changed .copyright div to
.copyright {
clear: both;
text-align: right;
margin-right: 20px;
}
So I get rid of float:right within .copyright and it worked!
What I want is a layout for each list item like:
But what I'm getting is more like:
So I want to:
Put div1 to occupy a specific width, for instance 20px (in percentage would be better...) and is heigth to fill is parent heigth (list item heigth). I already tried put heigth:100% but no effect.
div2 should occupy the rest of the horizontal space with some padding.
How can I manipulate css style to do that?
Below is my code so far:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div1"> </div>
<div class="div2">Some content</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.listItem div {
display: inline-block;
}
.div1{
width: 20px;
}
.div2{
padding: 15px;
}
</style>
Something like this? DEMO
ul {
list-style: none;
padding: 0;
margin: 0;
display: table;
width: 100%;
}
li {
display: table-row;
}
.listItem div {
display: table-cell;
}
.div1 {
width: 10%;
}
.div2 {
width: 90%;
padding: 15px;
}
Using jQuery Mobile 1.3 I used an example using a listview widget from the docs to achieve what I think you are going for.
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li><div class="div1">test</div><div class="div2wr"><div class="div2">test2</div></div><div class="clr"></div></li>
</ul>
<style type="text/css">
.div1, .div2wr{
height:30px;
}
.div1 {
width: 10%;
background:black;
float:left;
}
.div2wr {
width: 90%;
float:right;
}
.div2 {
margin:5px;
height:20px; /* height must be height of div1/div2wr minus div2 margin X2 */
background:blue;
}
.clr{
clear:both;
}
.ui-li-static.ui-li{padding:0px;
}
</style>
The solution that I used was:
<script id="listItemTemplate" type="text/x-jsrender">
<li class="listItem">
<div class="div2" style="border-left-color: #{{:CorBack}};">
Some content
</div>
</li>
</script>
<style>
.ui-li-static.ui-li {
padding: 0px;
}
.div2{
padding: 15px;
border-left-width:15px;
border-left-style:solid;
}
</style>