I am having trouble aligning my div so it doesn't push content below down, somehow if the asset name is more than one row, it will push down the metadata description down one row, I have tried positioning and flow and it seems now working, could some one please take a look to see what I have done wrong?
CSS
.port-container {
width: 490px;
height: 166px;
margin: 0px 0px 20px 0px;
float: left;
}
.port-container .port-image-link {
position: relative;
left: 10px;
}
.port-container .port-metadata-text {
padding: 50px 12px 10px 50px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 12px;
position: absolute;
margin-top: -180px;
margin-left: 173px;
z-index: 8;
line-height: 17px;
}
.port-container .port-image-link .port-text-link {
cursor: pointer;
width: 220px;
top: 138px;
position: relative;
text-decoration: none;
z-index: 9;
}
.port-container .port-image-link a {
text-decoration: none;
}
.port-container .port-image-link a span.port-text-link {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
line-height: 17px;
position: relative;
top: -170px;
font-size: 12px;
text-decoration: none;
padding: 9px 50px 0px 0px;
font-weight: bold;
cursor: pointer;
left: 220px;
display: block;
}
.port-container .port-image-link a:hover span.port-text-link {
cursor: pointer;
text-decoration: underline;
}
HTML
<div class="port-container">
<div class="port-image-link">
%asset_thumbnail%<span class="port-text-link">%asset_name%</span>
<div class="port-metadata-text">%asset_metadata_DC.Description%</div>
</div>
</div>
Related
I'm trying to make a simple website for a homework.
This is how the site looks like on google chrome.
At first, I used px instead of '%' for my website, then changed it because turned out it looked different on different browsers. After I used '%', I was satisfied because it looked the same, but then I tried to open it on my phone's google chrome and this is how it looks
I tried using the meta viewport, but that only made it worse. All the element overlaps with each other. My friends didn't use any media queries and their sites still looked alright on both mobile and desktop (fonts looked smaller and everything, but the layout was still alright).
here's the css code:
<style>
.header{
background-image: url("https://www.blibli.com/friends/assets/masakan-indonesia-featured-696x464.jpg");
position: absolute;
height: 25%;
width: 99%;
text-align: center;
filter: blur(2px);
-webkit-filter: blur(2px);
}
.headertext{
font-family: Bebas Neue;
font-size: 4.5em;
top: 7%;
left: 28%;
position: absolute;
color: white;
z-index: 1;
text-decoration: none;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: chocolate;
overflow: hidden;
position: absolute;
width: 99%;
top: 26.5%;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 1% 9.92%;
text-decoration: none;
font-size: 1.373em;
font-family: Roboto;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.sidebar{
width: 20%;
height: 107%;
float: left;
display: block;
top: 40%;
position: absolute;
background-color: rgba(148, 145, 141, 0.37);
}
.main{
width: 76.3%;
height: 220%;
display: block;
position: absolute;
top: 40%;
left: 23%;
background-color: rgba(148, 145, 141, 0.37);
}
.box{
border:1px solid red;
position:absolute;
width:80%;
height:22%;
left: 5%;
transition: 0.2s;
}
.box:hover{
transform: scale(1.05);
}
.top{
top: 3%;
}
.middle{
position: absolute;
top: 31%;
}
.bottom{
position:absolute;
bottom:19%
}
.picture{
object-fit: cover;
width: 50%;
height: 85%;
position: absolute;
top: 7.5%;
left: 3%;
}
.text {
width: 40%;
height: 80%;
position: absolute;
top: 7.5%;
right: 4%;
font-family: Roboto;
font-size: 0.9em;
text-align: justify;
}
.judul{
font-family: Bebas Neue;
font-size: 1.6em;
line-height: 2;
letter-spacing: 0.3em;
}
.link{
bottom: 0px;
position: absolute;
font-family: Roboto;
font-size: 0.7em;
}
.button{
text-decoration: none;
display: inline-block;
padding: 1.5% 10%;
position: absolute;
bottom: 7%;
left: 35%;
font-family: Roboto;
font-size: 1.2em;
}
.button:hover{
background-color: white;
color: black;
}
.more{
background-color: chocolate;
color: white
}
.rekomendasi{
display: block;
position: absolute;
width: 96%;
height: 5%;
font-size: 1.8em;
font-family: Bebas Neue;
padding: 2%;
background-color: chocolate;
text-align: center;
letter-spacing: 0.1em;
color: white;
}
.rekomendasicontent{
position: absolute;
top: 85%;
font-size: 0.6em;
text-align: left;
font-family: Roboto;
letter-spacing: 0em;
color: black;
line-height: 160%;
}
.populer{
display: block;
position: relative;
top: 49%;
width: 96%;
height: 5%;
font-size: 1.8em;
font-family: Bebas Neue;
padding: 2%;
background-color: chocolate;
letter-spacing: 0.1em;
color: white;
text-align: center;
}
.populercontent{
font-size: 0.6em;
text-align: left;
font-family: Roboto;
letter-spacing: 0em;
position: absolute;
top:85%;
color: black;
line-height: 160%;
}
.link2{
color: black;
text-decoration: none;
background-color: none;
}
li{
transition: 0.2s;
}
li:hover{
transform: scale(1.1);
}
.footer{
width: 97.8%;
position: absolute;
top: 260%;
background-color: chocolate;
font-family: Roboto;
font-size: 1em;
color: white;
text-align: center;
padding: 0.5%;
}
</style>
I need two texts to be stacked like this using CSS:
I tried this code:
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.special-order>span {
display: inline-block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.special-order>span {
background: #000000;
color: #f58220;
display: block;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I’m getting some space between the two texts. Help me with this.
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
span.special {
background: #000000;
color: #f58220;
display: block;
font-weight: 700;
line-height: 1.3;
padding: 0 4px;
border: 1px solid white;
border-radius: 2px;
}
.order {
display: inline-block;
font-weight: 600;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1;
border-radius: 1px;
}
<div class="sp-order">
<span class="special">Special </span>
<span class="order">Order</span>
</div>
You can try this :
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span:first-child {
display:block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.sp-order>span:last-child {
background: #000000;
color: #f58220;
padding: 0 2px;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
Just change your second CSS selector to .sp-order>span
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span {
background: #000000;
color: #f58220;
display: block;
padding: 2px 12px;
}
.sp-order>span:nth-child(2) {
background: #ddd;
color: #fa0;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I'm creating icons using only CSS3. So far so good, but I've run into a problem with the simplest one.
I just want to have an "!" centered in a circle, but its position isn't consistent. Sometimes it's a pixel higher, a pixel to the left, or both.
I have no idea what's causing this.
Here's a fiddle.
.nos {
position: relative;
height: 12px; width: 12px;
border: 2px solid #e04006;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
display: block;
color: #e04006;
overflow: hidden;
cursor: default;
}
.nos:hover {
overflow: visible;
}
.nos span {
position: absolute;
padding-left: 18px;
display: block;
font-size: 14px; line-height: 16px; text-decoration: underline;
white-space: nowrap;
}
.nos:before {
content: '\21';
position: absolute; top: 0; bottom: 0; left: 0; right: 0;
margin: 0;
height: 16px; width: 16px;
display: block;
font-family: "Lucida Console", Monaco, monospace; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold;
}
Remove the height: 16px; width: 16px; from .nos:before
Update Fiddle
Looks like I managed to fix it after some tinkering. Not sure what did the trick.
.nos {
position: relative;
width: 12px; height: 12px;
border: 2px solid #e04006;
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
display: inline-block;
color: #e04006;
overflow: hidden;
cursor: default;
}
.nos:hover {
overflow: visible;
}
.nos span {
position: absolute; top: -2px; left: -2px;
height: 16px;
padding-left: 18px;
display: block;
text-decoration: underline; font-size: 14px; line-height: 16px;
white-space: nowrap;
}
.nos:before {
content: '\21';
position: absolute; top: -2px; left: -2px;
width: 16px;
display: block;
font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: bold; font-size: 13px; line-height: 13px;
}
Fiddle
I'm trying to create a match div, which show match information. However they should all be different sizes and it does not seem like it wants to center properly. I want all these text to be centered in the middle of the div? how can this be done?
.saperator {
margin-right: 17px;
vertical-align: text-bottom;
color: #787878;
}
.result-in-month {
padding: 25px 20px;
background: #efefef;
margin-bottom: 10px;
border-radius: 4px;
border: none;
transition: all 0.45s ease-in-out 0s;
position: relative;
}
.result-in-month:hover {
background: #FFF;
box-shadow: 0px 0px 3px 1px #e5e5e5;
}
.result-in-month {
padding: 20px 30px;
font-size: 15px;
}
.result-date {
display: inline-block;
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
line-height: 40px;
}
.result-stream {
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
.result-stream a:hover {
text-decoration: none;
}
.result-match-team-wrapper {
display: inline-block;
width: 72%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-match-versus {
padding: 0px 3px;
font-weight: normal;
color: #999999;
}
.result-match-team.left {
margin-right: 2.5%;
text-align: right;
}
.result-match-team.right {
margin-left: 2.5%;
text-align: left;
}
.result-match-team {
display: inline-block;
width: 40%;
}
.result-match-separator {
margin: 0px 2.5%;
}
#nav {
margin-left:0px !important;
}
#nav li {
display: inline-block;
padding: 4px 11px;
background-color: #fff;
margin-right: 6px;
}
#nav li a {
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
}
#nav li.active {
background-color: #000;
}
#nav li.active a {
color: #fff;
}
<div class="result-in-month">
<div class="result-date">
SLUT
</div>
<div class="result-match-team-wrapper">
<span class="result-match-team left">
TEAM 3
</span>
<span class="result-match-versus">
VS
</span>
<span class="result-match-team right">
TEAM 1
</span>
</div>
<div class="result-stream">
<span class="result-match-score" >2</span><span class="result-match-separator">-</span><span class="result-match-score">1</span>
</div>
<div class="clear"></div>
</div>
You could let the inner divs behave like table cells and then vertical align them.
div {
border: 1px solid grey;
}
.match-header {
display: table;
width: 100%;
height: 300px;
}
.v-center {
vertical-align: middle;
display: table-cell;
}
.player-a {
font-size: 3em;
text-align: center;
}
.player-b {
font-size: 6em;
text-align: center;
}
.score {
font-size: 1em;
text-align: center;
}
<div class="match-header">
<div class="player-a v-center">
Ann
</div>
<div class="score v-center">
5 vs 6
</div>
<div class="player-b v-center">
Bob
</div>
</div>
I would probably change the structure of your HTML but this should see you on the right track with what you've got.
Updated fiddle
You can use absolute positioning on the children elements of your result-in-month class like so
.result-date{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12%;
margin-right: 2%;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
}
.result-match-team-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 94%;
text-align: center;
text-transform: uppercase;
line-height: 40px;
font-weight: normal;
font-size: 18px;
}
.result-stream{
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
display: inline-block;
width: 12%;
text-transform: uppercase;
line-height: 40px;
text-align: right;
color: #212121;
font-size: 36px;
}
Do you mean something like this ?
https://jsfiddle.net/wgrLfxg3/4/
Because you are using elements you only declared the font and size in nav but not the rest of elements
add the follow to the other elements and it will work fine. Take a look to the fiddle
font-size: 18px;
font-weight: 400;
font-family: Oswald, Impact, sans-serif !important;
When resizing my window to check the responsiveness of a Wordpress site that I'm working on I noticed that when moving up to a larger window size, all of a sudden my slider in the header overlaps on top of the content below it. Once you resize the window to a smaller size it corrects itself. What's the deal?
Here's my code for the slider and the content below it:
#slideshow_cont { width: 646px; float: left; margin-right: 0px; margin-bottom: 10px; position: relative; }
#slideshow { width: 646px; min-height: 280px; }
.slide_box { display: none; position: absolute; top: 0; left: 0; }
.slide_box_first { display: block; width: 646px; height: 280px;}
.slide_box img { display: block; width: 646px; height: 280px; }
.slide_box iframe { display: block; width: 646px; height: 280px; }
.slide_box_title { padding: 8px 10px; font-size: 20px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; background-color: #fff; height: 23px; }
.slide_box_title a { color: #222; text-decoration: none; }
.slide_prev { position: absolute; top: 132px; left: 0; cursor: pointer; z-index: 30; }
.slide_next { position: absolute; top: 132px; right: 0; cursor: pointer; z-index: 30; }
.home_box { float: left; width: 313px; background-color: #fff; margin-bottom: 0px; margin-right: 0px; }
.home_box img,
.home_box iframe { width: 313px; height: 196px; }
.home_box_last { margin-right: 0; }
.home_box_cont { padding: 5px 5px; text-align: center; }
.home_box_cont h3 { font-size: 20px; margin: 0px 0 10px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; }
.home_box_cont h3 a { color: #222; text-decoration: none; }
.home_box_cont h3 a:hover { text-decoration: none; color: #f2664f; }
.home_box_text .home_box_cont { text-align: center; font-size: 18px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; background-color: transparent;}
.archive_title { background-color: #F5F5F5; padding: 10px 8px; margin-bottom: 20px; font-size: 16px; }