I'm trying to split my container in multiple square box with different dimensions. I used jsfiddle to show you my project:
http://jsfiddle.net/y0j55ooL/
#import url(http://fonts.googleapis.com/css?family=Roboto);
#menu {
text-align:center;
}
#menu li {
display: inline;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu a{
padding:0 30px;
color: #C0C0C0;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #454343;
text-align: center;
}
#container {
margin:1% auto;
border: 0.1em solid;
}
#footer{
position: absolute;
bottom: 0;
left: 0;
width:100%;
background-color:#333;
height:3em;
line-height:3em;
text-align:left;
}
This is the index.html page:
<!DOCTYPE html>
<html>
<head>
<style>
#import url(main.css);
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Il mio PC</li>
<li>prova</li>
</ul>
</div>
<div id="container">
ciao
</div>
<div id="footer">
prova
</div>
</body>
Now I'd like to split container like this image:
http://thumbs.dreamstime.com/z/cool-new-web-template-large-icons-28075027.jpg
I'd like to create inside container a rounded square box much bigger than others. On the right and on the bottom of this big square I would some little square box.
I tried table and table-cell with display attribute but my result wasn't acceptable. I must use only css and html.
Thanks.
Use positioning. I've just shown you a quick demo below of how this could be done:
html,body{margin:0;padding:0;}
.wrapper{
width:100%;
height:600px;
background:gray;
position:relative;
}
.bigImg{
height:45%;
width:55%;
background:url(http://placekitten.com/g/300/300);
position:absolute;
top:10%;
left:15%;
}
div{
display:inline-block;
height:20%;
width:25%;
position:absolute;
}
.one{
background:red;
left:75%;
top:10%;
}
.two{
background:blue;
left:75%;
top:35%;
}
.three{
background:green;
left:15%;
top:60%;
}
.four{
background:orange;
left:45%;
top:60%;
}
.five{
background:yellow;
left:75%;
top:60%;
}
<div class="wrapper">
<div class="bigImg"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
Related
I currently have a Header in my HTML which is a Unordered List with List Items display = inline. What I am try to accomplish is to spread each of the 5 items into an equaled space (20% Width for each) and step them centered in their respective spaces. I was able to accomplish this with a lot of ease on the Footer, but instead of List Items, I used Divs for each of the Options. Can anyone help me do the same with list? I can redo it as Divs, but I'd like to at least know how to make the list work.
How it should be
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
}
#header li {
display:inline;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
I hope I was able to illustrate what I am trying to accomplish, but if it is still unclear please let me know. Thanks in advance for any help.
You can try like this ,I hope it will helps you.
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
}
#header .holder {
width:100%;
float:left;
}
#header ul {
display: table;
margin: 0;
padding: 0;
width: 100%;
}
#header a {
color: #ffffff;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#header li {
display: table-cell;
padding: 5px 0;
position: relative;
text-align: center;
vertical-align: middle;
width: 20%;
}
#header li:after {
border-left: 1px solid #2f477a;
content: "";
height: 20px;
position: absolute;
right: 0;
top: 8px;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
ul {
display: flex;
}
#header li {
...
flex: 1;
display: flex;
align-items: center;
justify-content: center;
...
}
https://jsfiddle.net/234zzgn7/
Add this css. Ofcourse this is using flexbox which is something that I found to be extremely awesome. But you should investigate whether your users support it or not.
http://caniuse.com/#search=flexbox
Here try this. Changes are on #header li and #header a
html, body {
margin:0;
padding:0;
height:100%;
}
a:link {
text-decoration:none;
}
#page {
position:relative;
background:#E9EAEE;
min-height:100%;
}
#header {
position:fixed;
left:0px;
top:0px;
z-index:1;
width:100%;
background-color:#3f5c99;
padding-top:10px;
}
#header .holder {
width:100%;
float:left;
}
#header a {
color:#ffffff;
font-size:11px;
font-weight: bold;
padding:0px 10px 0 0;
text-transform:uppercase;
display:block;
width:100%;
box-sizing:border-box;
}
#header li {
display:inline-block;
box-sizing:border-box;
width:20%;
margin-left:-10px;
padding:0 4px 0 6px;
border-left: 1px solid #2F477A;
}
.logo {
border-radius:2px;
}
<body>
<div id="page">
<div id="header">
<div class="holder">
<ul>
<li style="border-left:0px;"><img class="logo" src="../img/logo.png"/></li>
<li>Comics</li>
<li><img src="../img/friendOff.png"/></li>
<li><img src="../img/mailChatOff.png"/></li>
<li><img src="../img/globeOff.png"/></li>
</ul>
</div>
</div>
...
</div>
</body>
Probably a really simple solution.
I have two container divs
.topwrap{
position:relative;
top:100px;
background:#00C;
}
and
.lowerwrap{
position:relative;
top:100px;
background:#00C;
}
but .lowerwrap for some unknown reason keeps staying above .topwrap. Within those two containers are images etc that are positioned correctly. Its just that I cant get .lowerwrap to go directly below .topwrap
Sorry if I havent explained it all properly.
Kind regards
(full code)
/*---------------------------- Header ----------------------------*/
.headerwrap{
position:relative;
}
.header{
position:relative;
width:100%;
z-index:1;
}
.header img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.logo{
position: absolute;
float:left;
width:15%;
top:5%;
left:43%;
z-index:10;
}
.logo img{
display: block;
margin-left: auto;
margin-right: auto;
}
/*---------------------------- Main Work ----------------------------*/
.menu{
width:100%;
top:0px;
z-index:200;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li{
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a{
color:#A11D22;
transition:300ms;
}
li a:hover {
color:#999;
}
.menutxt{
text-align: center;
font-family: 'Roboto', sans-serif;
font-size:2.5vw;
color:#A11D22;
font-weight:bold;
z-index:3000;
}
/*----------------------------Top ----------------------------*/
.topwrap{
position:relative;
background:#00C;
height:auto;
}
.face{
position:relative;
width:20%;
float:right;
right:15%;
background:#00C;
}
.face img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.speech{
position:relative;
width:50%;
float:right;
right:15%;
background:#00C;
}
.speech img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
position:relative;
background:#00C;
}
<!--===================================================Header===================================================!-->
<div class="headerwrap">
<div class="header">
<img src="images/header.png" />
<div class="logo">
<img src="images/logo.png" />
</div><!--close logo-->
<div class="menu">
<ul class="menutxt">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div><!--close menu-->
</div><!--close header-->
</div><!--close headerwrap-->
<!--===================================================Top===================================================!-->
<div class="topwrap">
<div class="face">
<img src="images/face.png"/>
</div><!--close face-->
<div class="speech">
<img src="images/speech.png"/>
</div><!--close speech-->
</div><!--close topwrap-->
<!--===================================================Lower===================================================!-->
<div class="lowerwrap">
<p>dsadsadasd</p>
</div><!--close topwrap-->
</body>
</html>
I wouldn't use top, how about this:
.topwrap{
clear: both;
position:relative;
float: left;
background:#EEE;
margin-top: 100px;
}
.lowerwrap{
position:relative;
float: left;
background:#555;
display: block;
}
I created a simple fiddle here:
https://jsfiddle.net/6xj5snv2/
you have to use z-index to achieve that. keep in mind that the div with the higher z-index will be on top so i suggest to add z-index:2 for .topwrap and z-index:1 .lowerwrap you can read more here: http://www.w3schools.com/cssref/pr_pos_z-index.asp
I've created five different sections of images, displayed just as you can see in jsfiddle, the problem is that I can't control the margin of these imagesections. The thing is that I'm trying to add some space between section 1, 2, 3, 4 and 5, but whenever I add the margin the section just refuse to move.
I've tried to reset the float with the codes:
clear:both;
and
float: none;
but without success. The result of those codes is just that the section jumps to a new line.
The fiddle: https://jsfiddle.net/p0eaxkpz/
I found your problem, there is an error in your code: margin-left:0,5%; should be margin-left:0.5%;
Here is your updated jsfiddle
I have simply added margin: 0; padding: 0; to all elements, you can see it's working well. Basically, there is no need for you to wrap the images with <section> tags.
I also got a more modular aproach
#charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body
{
background-color:black;
width:100%;
height:100%;
padding-bottom:20%;
}
#wrapper
{
width:80%;
height:1000px;
background-color:white;
margin:auto;
}
#headerloga
{
float:left;
width:20%;
height:20%;
font-family: "Gotham Medium";
font-weight:800;
font-size:40px;
padding-top:10%;
padding-left:10%;
}
#menu
{
float:left;
width:60%;
height:auto;
font-family:"Gotham Medium";
font-size:15px;
padding-top:17.5%;
padding-left:10%;
}
ul {
float: left;
width: auto;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: left;
width: auto;
text-decoration: none;
color: black;
padding: 0.2em 0.6em;
}
a:hover {
color:#ED1C91;
}
li {
display: inline;
}
#imageshosting {
background-color:#CCC;
width:60%;
height:80%;
position:absolute;
clear:both;
top:40%;
left:18%;
}
.img-hosted {
display:block;
position:relative;
float:left;
height:49%;
margin:0.5%
}
.w33 {
width:32.33%;
}
.w66 {
width:65.66%;
}
.img-nextline {
clear: both;
}
#foot {
background-color:#666;
clear:both;
position:absolute;
top:120%;
left:18%;
width:60%;
height:10%;
}
<div id="wrapper"><!-- Webpage wrapper-->
<div id="headerloga">
Test
Test2
<section style="color:#ED178C; ">Test3 </section>
</div>
<div id="menu"><!--Menu-->
<ul>
<li>KUNDER</li>
<li>GAMLA FAVORITER</li>
<li>OM OSS</li>
<li>KONST</li>
<li>KONTAKT</li>
</ul>
</div><!-- End of menu-->
<!-- images starts-->
<div id="imageshosting">
<img class="img-hosted w33" src="images/testimage1.jpg"/>
<img class="img-hosted w33" src="images/testimage2.jpg"/>
<img class="img-hosted w33" src="images/testimage3.jpg"/>
<!-- New image line -->
<img class="img-hosted w66 img-nextline" src="images/testimage4.jpg"/>
<img class="img-hosted w33" src="images/testimage5.jpg"/>
</div><!--Imageshosting ends-->
<!--Footer here-->
<div id="foot">
<p>Hello</p>
</div>
</div><!-- End of webpage wrapper-->
I have a certain Header with my Logo and title. Just to the right of the Title Mobility group I want to create a nav bar that touches the bottom of the header with different tabs all the way to the right of the header. Messing around I was able to create something, but I can't seem to position it correctly.
http://jsfiddle.net/jHJK2/
http://jsfiddle.net/jHJK2/embedded/result/
I just can't figure out how to add this navigation bar to my header div.
HTML code:
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS Code:
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
Navigation Bar Code:
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Update
Just wanted to say Thank you all for your help.
Adapting your current method to a more html5 approach, you can use header and nav tags do better markup your document. Absolute positioning also gives you better control over your elements. You would set the header to a relative position, and the nav to absolute, and offset it by the height of your header.
nav {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
min-width: 800px;
text-align: left;
height: 20px;
padding: 10px 20px;
}
Here is your updated fiddle
And here is an update with the nav to the right, a bit messy though:
http://jsfiddle.net/jHJK2/5/
Not 100% sure if this is how you want it since your request wasn't very clear, but here's what I made.
http://jsfiddle.net/jHJK2/2/
Changes:
HTML:
<div id="header">
<div id="navigation"> //moved this before the other elements
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
</div>
CSS:
#navigation {
width:100%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
Make the following CSS changes:
Demo in jsFiddle
#header {
background-color:#115EA2;
height:100px;
width:97.5;
position: relative;
}
#navigation {
position:absolute;
/* top:0;
left:0;*/
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
I was trying to align a div to the center inside of another div. I searched, and all answers say to put "margin:auto;" or "margin: 0px auto;". I tried both, and neither will work.
My CSS is:
#slider div
{
margin:0px auto;
width:620px;
}
EDIT: I've tried all that has been suggested so for, no change for anything.
Could it be that #slider is Jquery???
As requested, here is the entire pages code:
<html>
<head>
<script type="text/javascript" src="C:\Users\Pam\Desktop\jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="C:\Users\Pam\Desktop\easyslider1.7\js\easyslider1.7.js"></script>
<style type="text/css">
body
{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
background-image:url('./bg.jpg');
}
#headerCon
{
display:block;
background-color:#151515;
width:100%;
height:40px;
padding-left:auto;
padding-right:auto;
position:fixed;
}
#header
{
width:950px;
height:100%;
margin-right:auto;
margin-left:auto;
}
#menu
{
margin-left:10%;
}
#title
{
background-image:url('./title.png');
background-repeat:no-repeat;
display:block;
height:123px;
margin:0px auto;
text-align:center;
}
#container
{
text-align:center;
display:block;
width:850px;
margin-right:auto;
margin-left:auto;
height:100%;
/* background-color:#dfdfdf; */
max-padding:100%;
position:relative;
}
a.link
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
}
a.link:hover
{
text-decoration:none;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
display:block;
width:100px;
height:30px;
border-right:1px solid #000000;
float:left;
color:#00af64;
padding-left:0px;
padding-top:10px;
text-align:center;
background-color:#252525;
}
p
{
color:#fff;
font-family:Arial,Helvetica,sans-serif;
}
#button1
{
margin-left:34%;
}
/* EASY SLIDER */
#slider div
{
position: absolute;
top: 50%;
left: 50%;
margin-top:2px;
margin-left:2px;
width:620px;
}
#sliderContain
{
position:absolute;
margin-left:3px;
margin-top:3px;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:620px;
height:230px;
overflow:hidden;
}
#transBorder
{
background-color:#111111;
opacity:0.60;
filter:alpha(opacity=60); /* For IE8 and earlier */
display:block;
height:236px;
width:626;
position:absolute;
z-index:-1;
float:up;
}
#slider1prev
{
display:none;
}
#slider1next
{
display:none;
}
</style>
</head>
<body>
<div id="headerCon">
<div id="header">
<div id="menu">
Home
Monsters
Areas
Trades
Classes
</div>
</div>
</div>
<div>
<br />
<br />
</div>
<div id="container">
<div id="title"> </div>
<div id="sliderContain">
<div id="slider">
<ul>
<li><img src="./reddragon.png"/></li>
<li><img src="./swamp.png"/></li>
<li><img src="./town.png"/></li>
</ul>
</div>
</div>
<div id="transBorder">
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
nextId: "slider1next",
prevId: "slider1prev"
});
});
</script>
</body>
</html>
It would be easier to see what's up if you posted the whole code.
Anyway use this css for child div:
position: relative;
margin: 0 auto;
And this css for the parent one:
text-align:center;
margin: 0 auto;
And tell me if it works or not.
You can use absolute positioning​
#one {
background: red;
position: relative;
}
#two {
width: 300px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* negative half of height */
margin-left: -150px; /* negative half of width */
background: blue;
} ​
http://jsfiddle.net/3kj6A/
You can try this:
#slider div
{
position: absolute;
left: 50%;
margin-left:-310px;
width:620px;
}
If that does not work, you can do the same as above, just change the margin-left to:
margin-left:-25%;
Hope that helps.
jQuery stuff can be aligned with CSS, if "#slider div" is still not aligned, you should check the other elements in the CSS, they could be affecting #slider.
Or your problem might be that the code should be:
#slider {
code in here
}
You do not need to state that the element is a div. "#slider div" refers to the div in the slider(child div), not the slider it self(parent div). Correct me if I had misunderstood.