I'm having issues properly centering this. I believe the whole table is offset to the left a little, but what I really notice are the icons. They should be to the right just a hair. I could add margin to slide it over a bit more, but I'm looking for something precise. It bothers me not knowing exactly how many pixels I'm off by. Would someone be able to tell me what my issues are here? And for the record I'm ridiculously new to coding and wasn't quite sure what my direction was going to be when I started this. I'm sure there are redundancies/inefficiencies in the css code. Here's a fiddle.
https://jsfiddle.net/smatchymo/rdxh9hd4/8/
And here's the code.
<body>
<div id='filter'></div>
<div id='watchface'></div>
<div id='text'>
<table>
<tr>
<td class='times'>4:00</td>
<td id='icon' class='icons'></td>
<td class='hourTemp'>69</td>
</tr>
<tr>
<td class='times'>5:00</td>
<td id='icon1' class='icons'></td>
<td class='hourTemp'>67</td>
</tr>
</table>
</div>
<div id='timecapsule'>
<div id='permatime'></div>
<div id='time'>12:00</div>
</div>
</body>
Here's the CSS:
body {
height: 100%;
width: 100%;
}
#watchface {
position: absolute;
top: 0px;
left: 0px;
height: 360px;
width: 360px;
position: absolute;
border-radius: 100%;
//background-color: black;
z-index: 0;
}
#timecapsule {
height: 360px;
width: 360px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
z-index: 30;
overflow: hidden;
}
#permatime {
position: absolute;
top: -45px;
left: 105px;
height: 100px;
width: 150px;
border-radius: 5px;
//border: 1px solid white;
background-color: black;
opacity: .7;
color: white;
text-align: center;
z-index: 40;
}
#time {
font-size: 30px;
color: white;
position: absolute;
top: 10px;
left: 105px;
width: 150px;
text-align: center;
z-index: 41;
}
#filter {
position: absolute;
height: 360px;
width: 360px;
top: 0px;
left: 0px;
background-color: black;
border-radius: 100%;
opacity: .7;
z-index: 2;
}
#text {
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
width: 360px;
height: 360px;
font-size: 16px;
color: white;
z-index: 3;
//overflow: auto;
}
.icons {
height: 37px;
width: 112px;
// border: 1px solid yellow;
}
#icon {
background: url("https://icons.wxug.com/i/c/v4/chancetstorms.svg") no-repeat center;
}
#icon1 {
background: url("https://icons.wxug.com/i/c/v4/flurries.svg") no-repeat center;
}
.hourTemp {
font-size: 24px;
text-align: right;
width: 74px;
margin-right: 40px;
}
.times {
font-size: 24px;
margin-left: 40px;
text-align: left;
//border: 1px solid lime;
width: 74px;
}
table {
padding: 75px 0px 0px 0px;
margin; 0px;
width: 360px;
text-align: left;
list-style-type: none;
font-size: 32px;
}
td {
margin: 0px;
padding-top: 5px;
padding-bottom: 5px;
}
Thanks in advance!
Bahhh, I swear I double checked my math... I was just about to make an edit to my post adding up the pixel sizes of the table data and padding to make things easier and clearer for anyone trying to help, but I realized everything doesn't add to 360 pixels as it should. My icon class width is 10px too small...
Related
I am having the following error when using
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: 100%;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
}
the issue is that the orange panels goes outside the screen. How can I fix this?Don't want to use fixed widths as it should be responsive
with width: inherit; to the orange block my example is working
body {
background-color: #ccc;
}
.container {
position: relative;
width: 300px;
background-color: #fff;
overflow: hidden;
padding: 50px 15px;
}
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: inherit;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
padding: 15px;
}
<div class="container">
<h1>Osloskolen</h1>
<div class="high-secuity">Your message</div>
</div>
I have been watching a tutorial on jQuery and he already had the css file made before but his output looks different than what I have when I downloaded the file
his:
The way it should be
Mine:
The code:
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
bottom: 50%;
margin-top: -25px;
}
#left, {
right: 20%;
left: inherit;
}
#right {
left: 20%;
right: inherit;
}
#down {
bottom: 20px;
top: inherit;
left: 50%;
margin-left: 5px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
How do I fix this, please let me know.
ps: i added one part of the code that was missing from the original question, hope this helps.
It was better if you was add the markup as well. However see the following example and make correction according it. Hope it will work for you.
#navArrows {
position: relative;
width: 150px;
height: 150px;
margin: 100px auto 0;
background: #333;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 100px;
padding: 20px;
}
.navigationArrow {
width: 50px;
height: 50px;
line-height: 50px;
padding: 0;
margin: 0;
position: absolute;
top: 20px;
left: 20px;
background: white;
color: #222;
}
#up {
left: 50%;
margin-left: -25px;
}
#left, #right {
top: 50%; // One of the key line
margin-top: -25px;
}
#right {
left: auto;
right: 20px;
}
#down {
bottom: 20px;
top: auto;
left: 50%;
margin-left: -25px;
}
.box {
height: 100px;
width: 100px;
background: #a7f;
color: white;
border: solid 4px #a1f;
line-height: 100px;
margin: 100px auto 0;
opacity: 0.5;
position: relative;
}
<div id="navArrows">
<div class="navigationArrow" id="up"></div>
<div class="navigationArrow" id="right"></div>
<div class="navigationArrow" id="down"></div>
<div class="navigationArrow" id="left"></div>
</div>
It looks like you have a comma after the #left class try replacing it with:
#left {
right: 20%;
left: inherit;
}
Try this one
#left {
left: 0;
}
So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.ruler-left:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom {
position: relative;
display: inline-block;
text-align: center;
width: 225px;
height: 2px;
float: right;
margin-right: 5px;
margin-top: 110px;
font-size: 0px;
}
.ruler-bottom:before {
content: '';
position: absolute;
top: -5px;
left: 0;
border-top: 5px solid Gainsboro;
border-right: 10px solid black;
border-bottom: 5px solid Gainsboro;
background-color: Gainsboro;
}
.ruler-bottom:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
<div class="shape-container">
<hr class="ruler-left" data-height="30 mm">
<div class="shape">Shape image</div>
<hr class="ruler-bottom" data-width="30 mm">
</div>
I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
CSS
.arrowRight{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #000000;
}
.arrowLeft{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 16px 8px 0;
border-color: transparent #000000 transparent transparent;
}
/* -------- */
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
.shape-container {
display: block;
position:absolute;
width: 260px;
height: 260px;
background: Gainsboro;
padding: 2px;
}
.ruler-left-div {
position:absolute;
left:-104px;
top:110px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
transform: rotate(-90deg);
}
.ruler-left {
display: inline-block;
width: 190px;
height: 2px;
}
.ruler-left:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom-div {
position:absolute;
bottom:10px;
right:8px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
}
.ruler-bottom {
display: inline-block;
width: 190px;
height: 2px;
margin-bottom:8px;
}
.ruler-bottom:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
HTML
<div class="shape-container">
<div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
<div class="shape">
shape image
</div>
<div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom" data-height="30 mm"><hr class="arrowRight"></div>
</div>
Here is my CSS. I've calculated width for all elements, but I just can't seem to find the culprit.
I did mess around with the code, and when header-nav is set to 850px or less, the scrollbar disappears. Please help?
html, body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: "Trebuchet MS";
font-size: 10pt;
color: #222222;
}
#container {
position: relative;
margin: 0px auto;
width: 1200px;
padding: 0px;
background: url(images/container-bg.png) repeat-y;
}
#header-nav {
width: 1200px;
height: 150px;
background: url(images/header-bg.png) no-repeat;
}
#menu{
position: relative;
top: 95px;
left: 390px;
list-style:none;
z-index:5;
padding: 0px;
margin: 0px;
}
#nav {
position: absolute;
left: 101px;
width: 230px;
padding: 10px;
}
#main {
position: relative;
left: 351px;
width: 720px;
min-height: 600px;
padding: 15px;
}
#footer {
position: relative;
left: 101px;
bottom: 0px;
width: 980px;
height: 99px;
padding: 10px;
background: url(images/footer-border.png) no-repeat;
background-color: #FFFFFF;
}
This is the Lightbox CSS sheet:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
But using it I get my pictures like this :
Pic1:
in other words - on the whole width of my page, I want to customise it in a way to get this result :
Pic2 :
I want to get 3-4 pics on each row, I tried by simply doing this:
<body style="width: 500px;">
<img src="pic/1.jpg" width="110" height="90" alt="image" />
<img src="pic/2.jpg" width="110" height="90" alt="image" />
</body>
But this leads to a bug when I go to large view for a single picture...
Thanks
Leron
use responsive image gallery plugins which display your images, when they are clicked by resizing them according to the width and height of your screen. a good one would be shadowbox or yoxview.