<html>
<head>
<style type="text/css">
#wholeborder{
background-color : #f2f2f2;
border-radius:5px;
border:1px solid #222;
resize:both;
width:700px;
height:320px;
overflow:auto;
}
#navigatorForLinkedIN{
height:70px;
}
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px;
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
ul#breadcrumbs li{
float:left;
background:;
height:30px;
padding:0 23px 0 10px;
text-align:center;
text-decoration:none;
text-color:#7a7a7a;
line-height:32px;
}
ul#breadcrumbs li.active{
background:url(../images/greenNav.png)no-repeat right;
color:#fff;
}
ul#breadcrumbs li a{
display:block;
text-decoration:none;
color:#2d2d2d;
line-height:32px;
text-shadow:0 0 1px #222;
}
ul#breadcrumbs li a:hover{
color:#000000;
background: url(../images/greenNav.png);
}
</style>
</head>
<body>
<div class="wholeborder" id="wholeborder">
<div class="navigatorForLinkedIN" id="navigatorForLinkedIN">
<ul id="breadcrumbs">
<li class="active">Connect with LinkedIn</li>
<li>Invite Friends</li>
<li>Complete Profile</li><a href="">
</a></ul><a href="">
</a></div><a href="">
</a><div class="linkedInLoginBox"><a href="">
<div class="head">
Discover contacts that can help you land your next job
</div>
</a><div class="body"><a href="">
</a><a class="sn-in" href="" title="Sign into LinkedIn" id="sn-lk-sign" rel="nofollow"><span class="sn-in-sign-span">Sign into LinkedIn</span></a>
<div class="disclaimer">
All information and activity will be kept private. Learn More
</div>
</div>
</div>
</div>
</body>
</html>
This is my html page
the margin is 100px, thats whats pushing it down
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px;
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
change the margin in this, 100 is pushing it down, you can use stuff like.
margin-top:;
margin-left:;
margin-right:;
margin-bottom:;
You have a style on ul#breadcrumbs: margin:100px; You can change it to margin:0 100px 100px.
Still, you may also want to set the body and html containers' margin and padding:
html, body{
margin:0;
padding:0;
}
I updated your fiddle you can check from link.
Updated Code:
/* optional */
margin:10px 100px;
Original one was margin:100px it means 100px from all sides. But 10px 100px means, top/bottom:10px | left/right:100px;
Your Updated Fiddle: http://jsfiddle.net/sLV5h/2/
Check the Js fiddle
http://jsfiddle.net/Ydbre/
Removed margin:100px in ul#breadcrumbs
Like say in the fiddle http://jsfiddle.net/sLV5h/1/ :
The answer was to change
ul#breadcrumbs{
list-style:none;
/* optional */
margin:100px; <-------This Line
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
ul#breadcrumbs{
list-style:none;
/* optional */
margin:0px 100px 100px 100px; <----- by this (or something else)
padding:10px 2px 10px 10px;
background:#f2f2f2;
width:500px;
height:30px;
border-radius:5px;
border:1px solid #222;
-moz-box-shadow:0 0 3px 0 #000;
}
( salutation to The Dark Knight )
Related
I have the following alignment problem: I want the "random" div to have a full width in the window, that's why I added the "width:100%" command. But for some reason, the maximum width it displays the random div on is the width of the "fixedwidth" div, but the two are not connected. Why does the browser keep matching the maximum width of the two divs? If i increase the width of the "fixedwitdth" div, then the width of the "random div" also increases. But that does not make any sense.
<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">
body {
margin:0px;
font-family: arial,helvetica;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1200px;
background-color:green;
margin:0 auto;
}
#logodiv {
padding-top:7px;
padding-bottom:3px;
padding-left:50px;
float:left;
border-right: 2px solid #990000;
padding-right:30px;
}
#signindiv {
font-weight:bold;
padding:9px 80px 11px 20px;
font-size:0.9 em;
float:left;
border-right: 2px solid #990000;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9 em;
border-right: 2px solid #990000;
height:100%;
padding:10px 20px 10px 20px;
float:left;
}
#searchdiv {
float:left;
padding:6px 10px 5px; 5px;
border-right: 2px solid #990000;
}
#searchdiv input{
height:20px;
}
.break {
clear: both;
}
.random {
background-color:blue;
margin-top:10px;
height:30px;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
Sign in
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPLayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search..." />
<div>
</div>
</div>
<div class="break" />
<div class="random">
</div>
</div>
</body>
</html>
.random is a child of .fixedwidth, so it's a totally normal behaviour happening there.
If you sort your code properly then you will get to see it clearly:
and here is the css:
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-block;
margin:10px;
transition:0.5s;
overflow:hidden;
}
.divPhoto:hover {
border:1px solid #0000FF;
background-color:#CCC;
cursor:pointer;
height:175px;
}
foreach($photos as $photo) { ?>
<div class="divPhoto" >
<a class="fancybox" data-fancybox-group="gallery" href="upload/<?=$photo->filename?>"><img class="img-polaroid" src="upload/thumb/<?=$photo->filename?>"></a>
<input type="button" class="btn btnEffacer" value="effacer" style="margin-left:30px;" data="<?=$photo->id?>" />
</div>
<? } ?>
ANy idea on align the hover on bottom and not on top ?
Because now all pictures are moving when hovering an imahe
A vertical-align:top to the .divPhoto rule should be enough.
Since you change the height on hover from 140px to 175px, you need some extra margin-bottom on the unhovered state to pad it out to 175px height.
you should use display:inline-table; for .divPhoto div
Fiddle
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-table; /* <= this line */
margin:10px;
transition:0.5s;
overflow:hidden;
}
Since the elements are inline-blocks, you can simply use vertical-align: top:
.divPhoto {
border:1px solid #999;
width:140px;
height:140px;
border-radius:3px;
background-color:#EEE;
display:inline-block;
margin:10px;
transition:0.5s;
overflow:hidden;
vertical-align: top;
}
http://jsfiddle.net/Dtejn/
I am trying to make a portfolio kind of thing with HTML and CSS and my layout looks really good on my resolution of 1920 * 1080 but when i change the resolution everything moves around and everything looks really bad.
Can anybody point out to me where I am going wrong with my code and provide me with a solution to my problem?
--- Edited new code
How it looks on 1920 * 1080:
http://screencast.com/t/mq8H3baBxIi
So i have changed the advised things but i'm still getting that, for example, when i change from my screen resolution of 1920 * 1080 to 1280 * 1024 to test how it looks the comment areas pull on top of the grey 'contact me' box so that it ends up like me picture on this link:
http://screencast.com/t/xZEwSgwdqP
<html>
<head>
<link rel="stylesheet" type="text/css" href="portfolioStyles.css" />
</head>
<body>
<div id="pageTitleContact"> CONTACT ME</div>
<div id="sideBar"> </div>
<div id="commentSideBar"> </div>
<div id="logos">
<ul>
<div id="home"><li><img src="home.png" alt="list item 1" /></li></div>
<div id="aboutMe"><li><img src="aboutMe.png" alt="list item 2" /></li></div>
<div id="achievements"><li><img src="achievement.png" alt="list item 3" /></li></div>
<div id="hobbies"><li><img src="Hobbies.png" alt="list item 4" /></li></div>
<div id="contactMe"><li><img src="contactMeHighlighted.png" alt="list item 4" /></li></div>
</ul>
</div>
<textarea id="contactMeTextarea">
</textarea>
<div id="Commentsection">
<form action="postcommentandreturn.php" method="post">
<div id="nameAreaTitle">
Name:</div><input type="text" id="nameArea" name="name" />
<br>
<textarea placeholder="Insert Comment Here..." type="text" id="commentArea" name="comment"></textarea>
<div id="submitLocation"><input type="submit" id="submitComment" value="Submit"/></div>
</form>
</div>
<!--comment section-->
<div id="postedComments">
<tr>
<td><div id="postersName"> </div>
</td>
</tr>
<tr>
<td><div id="commentDate"></div></td>
</tr>
<tr>
<td>
<textarea id="postersComment"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
#sideBar {
background-color: #111111;
width:100px;
height:100%;
position:fixed;
z-index:-1;
}
#commentSideBar {
background-color: #111111;
width:300px;
height:100%;
position:fixed;
z-index:-1;
right:0;
}
#logos {
position:absolute;
margin-left:-20px;
}
#home {
margin-top:50px;
}
#homeInfo {
resize: none;
position:fixed;
display: block;
height:400px;
width:800px;
overflow:hidden;
outline:none;
background-color:#3f3f3f;
color:white;
font-family:Arial;
font-size:30px;
border-radius:10px;
font-weight:700;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
max-width:800px;
margin-left:-350px;
margin-top:-200px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#pageTitleContact {
position:fixed;
top: 50%;
left: 50%;
margin-top:-400px;
margin-left:-400px;
color:limegreen;
font-size:100px;
font-family:Arial;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
padding-left:20px;
padding-right:20px;
}
#aboutMe {
margin-top:100px;
}
#achievements {
margin-top:100px;
margin-left:-7px;
}
#hobbies {
margin-top:100px;
}
#contactMe {
margin-top:100px;
margin-bottom:50px;
}
#contactMeTextarea {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
resize: none;
position:fixed;
display: block;
height:600px;
width:1000px;
max-width:1000px;
outline:none;
background-color:#3f3f3f;
color:whitesmoke;
font-family:Arial;
font-size:30px;
border-radius:10px;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
margin-left:-500px;
margin-top:-300px;
padding-top: 50px;
}
#Commentsection {
position:fixed;
top:50%;
margin-left:140px;
margin-top:-300px;
}
#nameAreaTitle {
font-family:Arial;
color:black;
font-weight:bold;
}
#nameArea {
font-family:Arial;
color:black;
width:300px;
height:40px;
font-size:30px;
}
#commentArea {
font-family:Arial;
color:black;
width:300px;
height:300px;
resize: none;
margin-top:10px;
font-size:20px;
}
#submitComment {
width:100px;
font-size:20px;
}
#postedComments{
position:absolute;
right:0px;
margin-top:10px;
margin-right:10px;
width:280px;
background-color:grey;
}
#postersName {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
font-weight:bold;
margin-top:10px;
}
#commentDate {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
}
#postersComment {
width:275px;
height:200px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
resize:none;
}
li {
list-style-type:none;
}
Without looking at it too closely, you can probably add a container div or something that wraps all your code up, and then assign a min-width attribute to ensure that it never goes smaller than the given size.
Your layout seems to be relying on the width of your body and as your window size changes so will the width of your body. Having a wrapper with a min-width or declared width will make it so a horizontal scroll bar will appear when users have a window smaller than the width of your container.
And like others have stated, you have some nesting issues. General page layout will look like this:
<html>
<head>
<!-- Head Content -->
</head>
<body>
<!-- Page Content -->
<ul>
<li><!-- List Item --></li>
<li><!-- List Item --></li>
</ul>
</body>
</html>
Need a quick bit of help please, I have knocked up a quick fiddle.
Link Here: http://jsfiddle.net/ozzy/qaN84/
css:
.outer {
width:210px;
height:180px;
padding:10px;
border:1px solid #aaaaaa;
border-radius:3px;
}
.month {
width:40px;
height:40px;
float:left;
margin:5px 5px;
border:1px solid #aaaaaa;
display:inline;
background-color:#efefef;
}
.month h3 {
font-size:16px;
font-weight:bold;
color:#444444;
text-align:center;
vertical-align:middle;
line-height:18px;
margin-top:10px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
text-transform:uppercase;
}
#current {
background-color:#dedede;
border:1px solid #ec008c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(255, 255, 255, 0.5) inset;
}
.month h3:hover {
color:#ec008c;
cursor:pointer;
}
.gallLink {
float:right;
margin-right:10px;
}
.gallLink a{
font-family: "proxima-nova-1","proxima-nova-2",Helvetica,Arial,sans-serif;
font-weight:normal;
text-decoration:none;
text-transform:uppercase;
font-size:12px;
color:#3399ff;
}
.gallLink a:hover{
color:#ec008c;
border-bottom:1px dotted #ec008c;
}
html:
<div class="outer">
<div class="month"><h3>jan</h3></div>
<div class="month"><h3>feb</h3></div>
<div class="month"><h3>mar</h3></div>
<div class="month"><h3>apr</h3></div>
<div class="month"><h3>may</h3></div>
<div class="month"><h3>jun</h3></div>
<div class="month" id="current"><h3>jul</h3></div>
<div class="month"><h3>aug</h3></div>
<div class="month"><h3>sep</h3></div>
<div class="month"><h3>oct</h3></div>
<div class="month"><h3>nov</h3></div>
<div class="month"><h3>dec</h3></div>
<div class="gallLink">View Gallery</div>
What I want is whan user hovers onto one of the month squares, the hover effect kicks in. At the moment it only has effect when I hover over the text.
Also am I coding this the most efficient way possible? with regard to Highlighting current month ?
Or is there a better way.
Any help appreciated
Is this what you are looking for?
http://jsfiddle.net/qaN84/2/
.month:hover h3 {
color:#ec008c;
cursor:pointer;
}
You may also want to add:
.month:hover{
cursor:pointer;
}
I have searched google, but I didn't find anything. I searched this site and found this topic Unwanted space between divs which seems similar, and i have tried to apply
margin:0px;
several places, but there i still, space between the two divs.
Heres my html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title/title>
<link rel="stylesheet" type="text/css" href="e.css">
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<div id="usr">
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
And my Css
html {
height: 98%;
}
body {
height:99%;
}
#page {
height:99%;
}
#content {
/*border:2px solid blue;*/
}
#bottom {
border:2px solid green;
height:15%;
vertical-align: bottom;
}
#up {
/*border:dotted green 2px;*/
width:59%;
}
.usrcom {
border-bottom: 2px dotted blue;
margin-left:15px;
margin-right:15px;
}
#usrp {
width:100%;
clear:both;
border-right: 2px solid blue;
border-left: 2px solid blue;
border-bottom:2px solid blue;
border:dotted yellow 2px;
}
/***Tabs menu*****/
#tabmenu {
float:left;
width:685px;
/*background:#BBD9EE;*/
/*background:#FF6633;*/
font-size:93%;
line-height:normal;
margin-top: 0px;
margin-left: 0px;
/*border:dotted red 2px;*/
border-bottom:2px solid blue;
/*border:dotted red 2px;*/
}
#tabmenu ul {
/*background:#BBD9EE;*/
padding:0px 0px 0 0px;
margin:0px;
list-style:none;
border:dotted green 2px;
}
#tabmenu li {
display:inline;
padding:0;
margin:0px;
}
#tabmenu a {
float:left;
/*background:url("img/tableft2.png") no-repeat left top;*/
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabmenu a:hover span {
background-color:#3399FF;
margin:0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#tabmenu a span {
float:left;
display:block;
/*background:url("img/tabright2.png") no-repeat right top;*/
padding:5px 15px 4px 5.5px;
margin:0px;
color:#FFFFFF;
background-color:#0000FF;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
I can find out why the space happens, how can I solve this unwanted space.
Edit:
Ups, yearh, forgot to tell which divs,
It is between 'Tabmenu' and 'usrp'
Edit:
Tried to apply in my css
#tab {
margin: 0px;
padding:0px;
}
For it is in really between 'tab' and 'usrp' but that does no help.
In CSS:
#tabmenu {
margin:0;
}
should do the trick
Learn how to use an inspector and "inspect this element". Then you can hover over all the elements on your page and literally see their margins/paddings, and what CSS is causing them. You can even edit CSS on-the-fly to test out a fix before applying it. My preference is the Firebug add-on for Firefox, but Chrome, Safari, and even Internet Explorer all have them built in now.