I've created a webpage with multiple flag banners using the class flag and flag-category. Both classes are set to position:absolute to show them uppon the image.
Now I want to display them beneath each other, so that they are in the same horizontal line. I already tried using margin-left / margin-right and float:left, but without success.
Here is the code:
.flag {
position: absolute;
font-size: .7em;
letter-spacing: 1px;
font-weight: 700;
padding: 3px 10px 3px 10px;
color: #FFF;
background-color: #f39;
border-radius: .4em 0 0 .4em;
margin: -25px -50px;
}
<head>
<link rel='stylesheet' id='child-theme-css' href='http://vocaloid.de/wp-content/themes/Vuturize/style.css?ver=2.1.2' type='text/css' media='all' />
</head>
<body class="category">
<div class="site-container">
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<article class="entry">
<header class="entry-header">
<div class="flag">Weekly VOCALOID Ranking</div>
<div class="flag flag-category2">Daily Ranking</div>
<div class="flag flag-category2">Events</div>
<div class="flag flag-category2">Interviews</div>
<div class="flag flag-category2">Merchandise</div>
<img src="https://www.dnb.no/portalfront/bilder-dnb/mennesker/680/680-220-bedriftsmoete-3.jpg" class="attachment-post-thumbnail" />
</header>
</article>
</main>
</div>
</div></div>
</body>
Try one with absolute and one relative.
Har du testat med en absolute och en relative?
.flag {
position: absolute;
font-size: .7em;
letter-spacing: 1px;
font-weight: 700;
padding: 3px 10px 3px 10px;
color: #FFF;
background-color: #f39;
border-radius: .4em 0 0 .4em;
margin: -25px -50px;
}
.flag:before {
content: ' ';
position: relative;
top: 0;
border-width: 26px 26px 0 0;
border-style: solid;
border-color: #F39 transparent transparent;
right: -26px;
}
.flag-category2:after {
border-width: 4px;
border-color: #005357 #005357 transparent transparent;
}
Try giving each item a unique class and apply z-index on them so that they stack on top of each other.
Or you could redo the flags as List Items, and apply margin-right to them so that they do not overlap like how they do right now.
Either ways, your divs don't have enough space between each other.
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
I am creating a simple recipes app. A list of recipes with there images are shown down the right hand side in individual tiles. The problem I am having is that when the list of recipe tiles goes beyond the browser view, the browser scroll bar does not appear (I have chrome as my browser) and the 3rd recipe tile goes beyond the browser page without being able to scroll down to see the rest of it.
I have found similar questions asked on here and have tried the resolutions provided (such as setting overflow to auto on the container), none of which have resolved my issue.
Here is the relevant code:
h2 {
font-size: 280%;
font-family: 'Lobster', cursive;
left: 160px;
position: relative;
top: 15px;
color: rgb(90, 205, 250);
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
* {
background-color: transparent;
width: 265px;
}
img {
border-radius: 12px;
height: 100px !important;
width: 261px;
right: 3px;
position: absolute;
bottom: 76px;
}
.list-item {
display: flex;
top: 0px;
position: relative;
left: 88px;
background-color: white;
border-radius: 12px;
margin-top: 15px;
border: solid #a84605 1.5px;
color: hsl(17, 89%, 40%);
height: 180px;
}
.item-text {
top: 75px;
position: relative;
color: rgb(100, 100, 100);
}
.recipe-container {
height: auto;
overflow: auto;
width: auto;
}
<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">
<h2>Recipes</h2>
<div class="recipe-container">
<div *ngFor="let recipe of recipes" class="list-item">
<a href="#" class="list-group-item clearfix" (click)="onRecipeSelected(recipe)">
<img [src]="recipe.imagePath" alt="{{ recipe.name }}" class="img-responsive">
<div class="pull-left">
<h4 class="list-group-item-heading item-text">{{ recipe.name }}</h4>
<p class="list-group-item-text item-text">{{ recipe.description }}</p>
</div>
</a>
</div>
</div>
I think the problem is that you set your height to 'auto' in .recipe-container. Try setting a fixed height of max-height. You could use 'vw' unit to set the height or '%'.
I'm trying to make a floating menu for one of my projects but I just can't get it to work.
My aim is to be able to have a horizontal menu floating in in the middle of the screen with a content div underneath. The content div (#preferencescontent), should never be wider than the content insider it, but no wider than 90% of the screen.
Now to the problem. It seems to work, sometimes, and for unknown reasons. Some tables shrink the div to the size of the menu while others expands a lot. I've added an example which for some reason expands the div way more than I expect it to.
Here's the code (codepen below):
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
https://codepen.io/anon/pen/vdOXWj
Grateful for any help. Thank you!
You can try removing float from your elements.
Also, you are adding positioning coordinates to elements which have not been given an explicit position, so you can remove them.
codepen
:root {
--alternatetablecolor: #f9f9f9;
--headerbackgroundcolor: #efefef;
--headerfontcolor: #333;
--bordercolor: #dddddd;
--defaultfontcolor: #222;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
text-align: center;
}
div#preferencesholder {
background: #fff;
display: inline-block;
text-align: left;
max-height: 75%;
max-width: 90%;
overflow: hidden;
padding: 0px;
border: 1px #000 solid;
-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
margin-top: 100px;
}
div#preferencescontent {
overflow-y: scroll;
max-height: 80%;
margin: 10px;
width: 100%;
}
div.sidemenu {
background-color: var(--headerbackgroundcolor);
width: 100%;
text-align: center;
}
div.sidemenu div.menuitem {
padding: 10px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
display: inline-block;
margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
max-height: 30px;
vertical-align: middle;
}
div.menuitem:hover {
background-color: #d0d0d0;
cursor: pointer;
}
div#helpcontent {
max-width: 550px;
margin: 0 auto;
}
<div class="lightbox" id="preferencesdiv">
<div id="preferencesholder">
<div class="sidemenu">
<div id="deviceoverviewbutton" class="menuitem">Device overview</div>
<div id="irulesbutton" class="menuitem">Defined iRules</div>
<div id="certificatebutton" class="menuitem">Certificates</div>
<div id="logsbutton" class="menuitem">Logs</div>
<div id="preferencesbutton" class="menuitem">Preferences</div>
<div id="helpbutton" class="menuitem">Help</div>
</div>
<div id="preferencescontent">
<div id="helpcontent">
<div id="helpcontent">
<h2>Tips and tricks</h2>
<h3>Filtering for pool members being down</h3>
<p>This one is a bit of a hidden feature. In the Pool/Members column you can filter on "DOWN", "UP" and "DISABLED".</p>
<p>It's not perfect though since pools or members with any of these words in the name will also end up as results.</p>
</div>
</div>
</div>
</div>
If you remove "float:left;"
from "div.sidemenu"
Do you get your desired result? I'm not sure I understand what you are trying to achieve here.
I am working for this website's responsiveness,
I want to stick the ratings image left to with a bit margin, when the width of the window is 335 it is working on left: 50% but when i increase the width of the window, it doesn't remain stick to what i want, Please suggest me, what should i do ??
Here is my code
<div id="filteredRestBody" class="row filteredRestBody">
<div id="row1" class="row">
<div id="yochina" class="col-sm-4 filterThumbnails" style="background: url('images/yochinathumbbck.jpg')">
<img src="images/bestoffers.png">
<div id="discountImg">
<img src="images/discountimg.png" style="">
<div class="discountNum" title="Discount">15%</div>
</div>
<div id="ratings" title="6/10">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingy.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
<img src="images/ratingw.png">
</div>
<div id="ratingNum">5</div>
<div id="restaurantThumbnailsTitle" class="restaurantThumbnailsTitle">
<span>Yo! China</span>
<br>
<span class="restaurantThumbnailsTitleText">chilled out chinese</span>
</div>
CSS
.filteredRestBody {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
border-top-left-radius: 23px;
box-shadow: 0 0 0 grey;
height: auto;
margin-left: -4%;
padding: 0 0 47px 8px;
position: relative;
top: 30px;
width: 111%;
}
.filterThumbnails {
background-position: 2px -19px;
background-repeat: repeat;
border-top-left-radius: 10%;
border-top-right-radius: 10%;
height: 200px;
margin-left: 5.3%;
margin-top: 50px;
position: relative;
top: -36px;
width: auto;
}
#ratings {
background: none repeat scroll 0 0 rgba(0, 0, 0, 1);
border-radius: 8px;
left: 50%;
padding: 0 7px 4px;
position: absolute;
top: 49%;
}
#ratingsNum {
background: none repeat scroll 0 0 rgba(0, 193, 0, 0.9);
border-bottom-right-radius: 9px;
border-top-left-radius: 9px;
font-family: Times New Roman;
font-size: 1.6em;
font-weight: bolder;
left: 89%;
padding: 0 8px;
position: absolute;
top: 45.5%;
width: auto;
}
This is the first screenshot when the width is 335
This is what happens when i increase the window's width
Instead of using left, you can use right property in your CSS. This will stick ratingsNum and ratings divs to the right border of container div.
CSS
#ratings {
right:50px;
}
#ratingsNum {
right:10px;
}
jsFiddle Example
Hope it helps.
As a side note, I've noticed that your snippet contains some elements (i.e. #discountImg div) without the closing tag (in this example </div>). Pay attention because this can lead your layout to unpredictable results.
I have a page with fixed width and I am trying to put borders on it, left and right without success.
I know how to show borders but I cannot make them to reach the bottom of the page and stay there, unlees I set my divs to position:fixed which is not desired for my content div since I want it to scroll. is there a way to get around it?
Here is my css file (the code as shone below makes my borders go until 1/3 of my window even if I set body height:100%) - Thank you in advance:
body {
margin: 0 auto;
padding: 0 0 0 0;
width: 1024px;
/*height: 100%;*/
min-width: 50%;
font-family: calibri;
background-color: #999;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
overflow-y: scroll;
overflow-x: auto;
border-right: solid;
border-right-width: 5px;
border-left: solid;
border-left-width: 5px;
border-color: #1d687b;
}
div#all {
position: relative;
width: 1024px;
height: 100%;
margin: 0 auto;
/*padding: 0 0 5px 0;
border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
div#top {
position: fixed;
margin: 0 auto;
width: 1024px;
height: 145px;
background-image: url("images/bg_ttl.jpg");
/*border-right: solid;
border-right-width: 5px;*/
border-bottom: solid;
border-bottom-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
z-index: 1;
}
div#top_left {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: left;
text-align: left;
vertical-align: middle;
}
div#top_right {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: right;
text-align: center;
vertical-align: middle;
}
div#top_center {
position: absolute;
left: 200px;
width: 624px;
height: 135px;
padding: 5px 0;
float: right;
font-family: metalord;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
div#left_menu {
position: fixed;
top: 150px;
float: left;
width: 185px;
height: 100%;
padding: 15px 5px 15px 5px;
border-right: solid;
border-right-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
}
div#content {
position: relative;
top: 150px;
left: 205px;
width: 784px;
height: 100%;
padding: 15px 15px 5px 15px;
/*border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
HTML
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
<br />
& support
<br />
<br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
<br />
& organization</span>
</div>
<div id="top_center">
<span class="ttl_txt">ARSERUS</span>
</div>
<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
<br />
info#arserus.com
<br />
<br />
<u>phone No. (cy):</u>
<br />
7000 17 37</span>
</div>
</div>
</div>
<div id="left_menu">
<div align="right">
<span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
<br />
<br />
<span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
<span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>
<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>
The old school answer to this problem is to use Faux Columns -
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you actually use a background image on your body element that is 1px tall, and as wide as you want, including the 'border' as part of the image, and to tile the image vertically.
True, it doesn't rely on CSS borders, and making changes involves image editing, but it is reliable.
For the most part, I've found approaching web design with the idea of a fixed height to be problematic, and I try to avoid it.
It sounds like there is another css rule conflicting with your border rule. So what I would do to begin with, is:
remove all css rules.
apply your css border rule.
Re-add your other rule one at a time till the styles break over the problem rule.
This will narrow down the problem, and make the solution easier to find.
Aside from that, you could try applying the border styles to the <html> tag. Hope this helps!
You might try setting a static height:
height: 768px;
If you are looking to make a fluid (% - based) height scheme in CSS, that is really tough. You might try using jQuery to get the window height and style your elements according to that:
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);