I have a problem with my CSS.
I am working on a website which I want to make my own CSS for, I tried to make it myself but I can not figure it out.
I am aiming for a website that looks like this
But currently looks like this:
I tried everything I could. I am using some CSS right now but it isn't working how I want it too.
html {
background: #ECF0F1;
}
.sidebar {
width: 20%;
height: 100%;
float: left;
background: #043D5D;
position: fixed;
top: 50px;
left: 0;
}
.sidebar p{
margin-left: 10px;
color: #FFF;
}
.nav{
float: left;
position: fixed;
width: 100%;
height: 50px;
background: #043D5D;
top:0;
left:0;
}
.nav .logo img{
height: 40px;
}
.content{
width: 80%;
height: 100%;
float: left;
top: 55px;
position: fixed;
margin-left: 21%;
}
Fiddle: https://jsfiddle.net/bqgpn6hj/
Is there a better way to do this? Thanks in advance!
Check out my jsfiddle here: https://jsfiddle.net/bqgpn6hj/1/
I hope it can be usefull for you.
Code below:
body {
background: #ECF0F1;
}
.clear {
clear:both;
}
.nav {
width:100%;
float: left;
background:red;
}
.logo{
width: 20%;
float:left;
}
.search {
width:78%;
float:left;
padding: 10px 1%;
text-align:right;
}
.sidebar {
width: 16%;
background: green;
float:left;
padding: 2% 2%;
}
.content {
width: 80%;
float:left;
position:relative;
background: yellow;
height: 466px;
}
.subbar {
background: gray;
height: 200px;
}
.content .bottom {
position:absolute;
bottom:0px;
background: blue;
width:90%;
padding: 5%;
}
And HTML
<body>
<div class="nav">
<div class="logo">
<img src="http://placehold.it/40x40">EasyMusic
</div>
<div class="search">
<input type="text">
</div>
</div>
<div class="clear"></div>
<div class="sidebar">
<div class="subbar" id="1">
<p>Sidebar, links here</p>
</div>
<div class="subbar" id="2">
<p>Bottom</p>
</div>
</div>
<div class="content">
<p>Content, everything here</p>
<div class="bottom">
bottom
</div>
</div>
<div class="clear"></div>
</body>
Related
I'm attempting to have a static left div and have the right divs be scrollable. I'd like to be flexible so I set widths and heights to percentage basis.
Currently, when I scroll the left div scrolls with the right div, so when I reach the second right div in the stack, there is not left div associated to it.
I'd like for the left div to always remain and only the right divs to scroll.
HTML:
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
CSS:
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: static;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
You just have to set position: fixed for left div. Check code below.
html{
height:100%;
width:100%;
margin: 0px;
}
body{
height:100%;
width: 100%;
margin: 0px;
}
.div-left{
background-color: darkblue;
height: 100%;
width:50%;
margin: 0px;
float: left;
position: fixed;
}
#clear {
clear: both;
}
.div-right-1{
background-color: yellow;
height: 100%;
width: 50%;
margin: 0px;
float: right;
}
.div-right-2{
background-color: aqua;
height: 100%;
width: 50%;
margin:0px;
float: right;
}
<div class= "div-left div-left-small">
</div>
<div class= "div-right-1 div-right-1-small">
</div>
<div id="clear"></div>
<div class= "div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
you need the first in fixed position and the rest be margin-left at 50% ... if i understood:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.div-left {
background-color: darkblue;
height: 100%;
width: 50%;
margin: 0px;
position: fixed;
}
[class^="div-right"] {
background-color: yellow;
height: 100%;
margin-left: 50%;
}
.div-right-2 {
background-color: aqua;
}
<div class="div-left div-left-small">
</div>
<div class="div-right-1 div-right-1-small">
</div>
<div class="div-right-2 div-right-2-small">
</div>
<div class="div-right-3 div-right-3-small">
</div>
I have the following HTML and CSS code setting two pictures side by side and should shrink when pages shrinks, but this doesn't work.
I got rid of every class on parent divs, but still nothing...
Any idea why pictures do not shrink when browser window shrinks??
Thanks
.align {
position: absolute;
top: 75px;
z-index: -100;
}
.navigate {
margin: -10px 888px;
width: 200px;
z-index: 100;
}
.leftSide {
height: 558px;
margin: 20px 0px 0px 344px;
max-width: 500px;
}
.rightSide {
height: 558px;
margin: -5px 0px 0px 1053px;
max-width: 500px;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
margin: -557px 940px;
}
img {
width: 70%;
height: auto;
}
<div class="align">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a>
<a id="nextPic" href="#">Next>></a>
</div>
<div class="leftSide">
<img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
<div class="verticalLine"></div>
<div class="rightSide">
<img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
</div>
.align {
margin-left:auto;
margin-right:auto;
}
.container{
width:90%;
height:568px;
display:inline-block;
}
.navigate {
width: 100%;
text-align:center;
padding:20px;
}
.leftSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.rightSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
display:inline-block;
}
.leftSide img {
width:auto;
max-width:100%;
}
.rightSide img {
width:auto;
max-width:100%;
}
<div class="align">
<div class="container">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a> <a id="nextPic" href="#">Next>></a> </div>
<div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
<div class="verticalLine"></div>
<div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>
add these two attributes to the div class,
.div_class
{
margin-left: auto;
margin-right: auto;
}
I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.
I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).
The layout I am looking for (on a black page) is:
I want this to remain in the centre of the page if the screen displays anything more than 800px wide
The HTML I have so far is:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="outerleftcolumn">Left Column</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="outerrightcolumn">Left Column</div>
<div id="footer">Footer</div>
</form>
</body>
The CSS I have so far:
body {
margin: 0px;
padding: 0px;
background-color:black;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
}
I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.
Any pointer would be appreciated.
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
#outerleftcolumn {
float: left;
width: 15px;
height: 700px;
background-color: red;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
background-color: red;
}
#centercolumn{
overflow: hidden;
}
form{
display: block;
margin: auto;
width: 800px;
background-color: #000;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 620px;
}
#content {
background: #fff;
float: left;
width: 620px;
height: 620px;
}
#anotherheader{
float: left;
width: 100%;
height: 50px;
background-color: yellow;
}
#footer {
background: #df781c;
height: 30px;
width: 800px;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="outerleftcolumn">Left Column</div>
<div id="outerrightcolumn">Left Column</div>
<div id="centercolumn">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">
<div id="anotherheader">
</div>
</div>
<div id="footer">Footer</div>
</div>
</form>
</body>
I tweak a little bit your code, getting rid of the outter columns:
HTML:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</form>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color:red;
width: 800px;
}
#header {
background: #438a48;
width: 770px;
height:50px;
margin: 0px 15px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
margin-left: 15px;
}
#content {
background: #ff6a00;
float: left;
width: 620px;
height: 700px;
margin-right: 15px;
}
#footer {
background: lightblue;
clear: both;
width: 770px;
margin: 0px 15px;
}
Here is a fiddle: http://jsfiddle.net/v81wdmgp/
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle
I have this layout:
<div id="container">
<div id="sidebar">
<div id="logo"></div>
<div id="box"></div>
</div>
<div id="content">
<div id="gallery">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
And here is the CSS:
#container {
background-color: black;
display:block;
position:absolute;
height:auto;
width:auto;
bottom:0;
top:0;
left:0;
right:0;
overflow:hidden;
background-size:auto 100%;
margin:50px;
}
#sidebar {
background-color: purple;
min-width: 250px;
width:250px;
max-width: 20%;
height:100%;
overflow:hidden;
float:left;
}
#logo {
height: 100px;
background-color: orange;
}
#box {
bottom: 20px;
font-family: sans-serif;
font-size: 10px;
color: grey;
margin: 20px;
padding: 10px;
background-color: white;
overflow-y: scroll;
text-align: justify;
}
#content {
display:inline;
width:75%;
margin-left: 300px;
padding: 0px;
margin:0px;
text-align: center;
background-color: green;
overflow-y: scroll;
}
#gallery {
margin-left: auto;
margin-right: auto;
display: table;
background-color: blue;
}
.thumb {
width: 200px;
height: 150px;
display: inline-block;
background-color: black;
margin: 20px;
border: 7px solid white;
overflow:hidden;
background-color: yellow;
}
I need the content of the #box and either #gallery or #content to be scrollable vertically.
Because my layout is responsible and the overflow of the #container is hidden I think there must be some problem with these features.
Here I created a jsFIddle to illustrate the problem.
You can add this in CSS #box
max-height : 100px ; /*for example*/
EDIT :
for you can use
overflow: auto;
in DIV you want to scroll