I have been working on a simple shop layout. I want to display some 'hot' items.
Each item is a 100x70 box with an 36x32 image and under text. Each element has to have 15px margin between it.
So what I did is margin-left for every element, and disabled margin-left for first child.
But look what happens now, if I have a new line, this will happen:
(source: gyazo.com)
See the extra margin that my margin-left causes on the new line?
How can I prevent this? my css:
#hot {
max-width: 800px;
margin-top: 15px;
display: block;
overflow: hidden;
}
#hot li {
width: 100px;
height: 70px;
background-color: rgba(0, 0, 0, 0.4);
border: solid 1px rgba(255, 255, 255, 0.1);
list-style: none;
display: inline-block;
margin-left: 15px;
}
#hot li:first-child {
margin-left: 0;
}
#hot li img {
display: block;
width: 36px;
height: 32px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}
#hot ul {
padding: 0;
margin: 0;
}
#hot li span {
font-size: 12px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
text-align: center;
display: block;
}
Example html:
<div id="hot">
<span id="hotItems">Hot items</span>
<ul>
<li>
<img src="http://www.runelocus.com/img/items/144845.png" />
<span>A meme</span>
</li>
</ul>
</div>
js fiddle:
http://jsfiddle.net/cgbR9/
okay, here it goes :
maybe you can just use a margin-right and reset it to last-child
if needed ?
Related
I was wondering if there is an alternative method to achieving the results shown in the attached picture. I used absolute positioning to get .resume-icon-container to sit flush with .resume-container.
Every time I tried to add padding or height/width to .resume-icon-container it would undesirably resize .resume-container. I experimented with overflow: auto and the z-index but the only way I could achieve the results I want is with absolute positioning and adding margin-left to position it then padding and font-size to make it flush with .resume-container. I was browsing similar questions as well and someone said to add box-sizing: border-box but I already declared that setting in my CSS reset under the * selector.
I would prefer to stay away from absolute positioning for responsive purposes, so I was wondering if there is another way to achieve what I want.
This is the desired result:
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
padding: 20px;
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
position: absolute;
margin-left: 268px;
border-radius: 20px;
font-size: 10px;
}
.resume-icon-container i {
color: #fff;
}
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
</div>
</div>
Remove the absolute positioning and padding and use margin-left on your h1.
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
margin-left: 1em;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
border-radius: 20px;
}
.resume-icon-container i {
color: #fff;
width: 100%;
}
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
</div>
</div>
The way you are tuning those margins and paddings, you will always be looking at something different depending on the size of the screen. You need to use relative positioning so that the items appear on the screen the same regardless of the number of pixels. It can also get confusing to mix margin with padding. Margin will push the element from its nearest element while padding will push elements inside that element away from the left,top,etc.
I like to start by creating a container for each element so that we can design each new div element like its own page.
Consider the following code:
<div id="View">
<div id="OptionBlock">
<div id="Options1">
<div id="AddDocument" class="options">Add New Document<div id="DocumentIcon"></div></div>
<div id="AddTemplate" class="options">Add New Template<div id="TemplateIcon"></div></div>
</div>
<div id="Options2">
<div id="ChangeSignature" class="options">Change Your Signature<div id="SignatureIcon"></div></div>
<div id="Settings" class="options">Settings and Subscription<div id="SettingsIcon"></div></div>
</div>
</div>
</div>
#View {
width: 100%;
height: 60%;
}
#OptionBlock {
width: 100%;
}
#Options1 {
width: 100%;
float: left;
}
#Options2 {
width: 100%;
float: left;
}
#AddDocument {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-left: 24%;
margin-right: 2%;
margin-top: 2%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
#AddTemplate {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-top: 2%;
margin-right: 24%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
Notice how I treat the outer boxes as large containers, defining all the total width and height we need, then leaving it to the css for particular elements showing content to position themselves within that container on the screen. The width and left and right margins of elements #AddDocument and #AddTemplate add up to 100% width so that the entire box it is placed in is accounted for.
Preview CSS Placements (this renders dead center at the top of the webpage)
It's just a matter of playing with the css.
For this kind of "trial and error" problem you should use CodePen or similar. It'll make your life much easier.
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
/* padding: 20px;*/
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
padding: 20px;
margin: 0;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
float: right;
/*margin-left: 268px;*/
border-radius: 20px;
/*font-size: 10px;*/
height: 100%;
}
.resume-icon-container i {
color: #fff;
}
.bi {
font-size: 2rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
<i class="bi bi-file-earmark-text"></i>
</div>
</div>
I started doing a website and I have a problem.
I started making my navigation bar, here's the code:
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">
<button>Services</button>
<button>About us</button>
<button>Contact us</button>
</div>
<div class="third"><button>Get Started</button></div>
</div>
and the problem is that this <a> tag is taking space outside my button area. Here's a full code on Codepen:
https://codepen.io/MareGraphics/pen/GwqpOy
What I want is to contain A tag to fit 100% inside my button, not outside od it.
Thank You
The reason you cannot adjust the height and width of your <a> is because anchor elements are inline-elements.
An inline element does not start on a new line and only takes up as much width as necessary.
If you want to adjust the height and width you would need to specify another display property, e.g.
a { display: inline-block; }
For what it's worth, it's better to omit the button inside the anchor tag, just style the anchor tag as your button to make it act like a button.
e.g. if you are using bootstrap, you can do
Get Started
Use this code:
<a style="padding:50px;background-color:gray;width100%;line-height:70px;" class="btn btn-info">Buttons</a>
Remove your buttons from navgrid div and change the CSS like this
body {
margin: 0;
}
.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
position: fixed;
width: 100%;
top: 0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
.span-col-4 {
grid-column: span 4 / auto;
}
.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
background-color: white;
border-right: 1px solid rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: .5s;
}
.navGrid .first:hover {
cursor: pointer;
font-size: 1.31em;
}
.navGrid {
height: 40px
}
.navGrid .second {
display: flex;
padding-left: 50px;
border-style: none;
background-color: white;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
transition: .5s;
}
.navGrid .second a {
padding: 10px;
}
.navGrid .second a:hover {
background-color: rgba(0, 0, 0, 0.2);
text-decoration: none;
}
.navGrid .second:hover {
cursor: pointer;
}
.navGrid .third {
display: flex;
padding-left: 50px;
border-style: none;
background-color: rgb(0, 26, 255);
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
transition: .5s;
color: white;
}
.navGrid .third a {
padding: 10px;
}
.navGrid .third:hover {
background-color: rgb(3, 25, 219);
cursor: pointer;
}
.navGrid .third {
border-left: 1px solid black;
}
.content {
background-color: green;
height: 2000px;
}
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">
Services
About us
Contact us
</div>
<div class="third">Get Started</div>
</div>
I think this may help you.
Following is a menu that I am trying to create.
I want menu item divs to be independent in width, and have a width only as much is required for the text inside which i thought was default behavior. Where did I go wrong?
.patleLast {
padding: 10px;
border-radius: 1000px 0px 1000px 1000px;
background-color: black;
width: auto;
margin: 1px;
}
.patleFirst {
padding: 10px;
border-radius: 1000px 1000px 0px 1000px;
background-color: black;
margin: 1px;
}
.patle {
padding: 10px;
border-radius: 1000px 0px 0px 1000px;
background-color: black;
}
.topPan {
position: fixed;
top: 10px;
right: 0px;
color:white;
font-family: 'Raleway', sans-serif;
z-index: 1000;
text-align: right;
}
<div class="topPan">
<div class="patleFirst">
Book Tickets
</div>
<div class="patle">
Screening Schedule
</div>
<div class="patleLast">
Book Tickets
</div>
</div>
This is expected behaviour. The default display for divs is block which will always take up the full width.
To achieve the behaviour you are after make the following changes to CSS:
Add float: right; to .patleLast, .patleFirst, .patle - this will shrink the divs to fit its content
Add clear: both; to .patleLast, .patleFirst, .patle - this will ensure they wrap onto new lines
By floating the div the width is computed as "shrink to fit".
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Floating, non-replaced elements (https://www.w3.org/TR/CSS2/visudet.html#float-width)
.patleLast {
padding: 10px;
border-radius: 1000px 0px 1000px 1000px;
background-color: black;
width: auto;
margin: 1px;
}
.patleFirst {
padding: 10px;
border-radius: 1000px 1000px 0px 1000px;
background-color: black;
margin: 1px;
}
.patle {
padding: 10px;
border-radius: 1000px 0px 0px 1000px;
background-color: black;
}
.patleLast, .patleFirst , .patle {
clear: both;
float: right;
}
.topPan {
position: fixed;
top: 10px;
right: 0px;
color:white;
font-family: 'Raleway', sans-serif;
z-index: 1000;
text-align: right;
}
<div class="topPan">
<div class="patleFirst">
Book Tickets
</div>
<div class="patle">
Screening Schedule
</div>
<div class="patleLast">
Book Tickets
</div>
</div>
This is the proper behavior for block elements.
Besides that semantically more proper would be to use list element
https://jsfiddle.net/bkv9rzr2/
<ul>
<li>item one</li>
<li>item 2</li>
<li>item three</li>
<li>item 4</li>
</ul>
ul {
position: fixed;
top: 10px;
right: 0px;
font-family: 'Raleway', sans-serif;
z-index: 1000;
text-align: right;
}
a {
color:white;
}
ul li {
display:block;
margin:1px;
}
ul li a {
display:inline-block;
background:#000;
padding: 10px;
border-radius: 20px 0px 0px 20px;
transition:.2s;
}
ul li:first-child a {
border-radius: 20px 20px 0px 20px;
}
ul li:last-child a {
border-radius: 20px 0px 20px 20px;
}
ul li a:hover {
padding:10px 20px;
}
That's not typical div behavior. By default <div> elements have display: block, which will try to stretch them to the full width of the container. You're going to want to use display: inline-block or float: left. Both of these will make the divs take the size of their content, however they will also try to line the elements side by side, instead of make them fall under each other.
One workaround for this is to insert <br/> tags after each element. Or add :after pseudo-selectors which have display: block.
Sorry to ask for css help again but I really can't get this one. My issue is that a sub div goes outside of an upper div's region. I tried using:
display: inline-block;`
but that makes the outer div go crazy.
My Problem:
There is a div with the id of sidebar, which contains the left boxes. which is inside another div with the id of main.
html:
<div id="main">
<div id="sidebar">
<div id="box">
<h3>Recently Uploaded</h3>
<ul>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
<li>heli mod</li>
<li>mw2 menu 1.14</li>
<li>402 Base</li>
</ul>
</div>
...
css:
#main
{
width: 80%;
height: 100%;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .4);
margin-left: auto;
margin-right: auto;
}
#sidebar
{
height: 100%;
width: 20%;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-top: 60px;
}
#box
{
/* min-width: 12em; idk if I wanted this */
width: 100%;
background-color: #F8F8F8;
border: 1px solid #000;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
}
#box p
{
padding: 10px;
}
#box h3
{
margin: 0;
margin-top: 5px;
padding-left: 10px;
border-bottom: 1px solid #000;
font-size: 12pt;
font-weight:bold;
}
#box ul
{
font-size: 10pt;
margin: 0;
padding: 0;
list-style: none;
}
#box ul li
{
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #000;
}
anything I can do? :(
A solution which should work cross-browser and have extremely good browser support would be to apply the following to your #main div:
#main{
...
overflow: hidden;
}
Using this will force any floated elements to be calculated into the container's height when drawing its background, borders, etc.
Try this :
display:table; /* TO our main ID */
try adding float: left; to #main
Please take a look at this fiddle: http://jsfiddle.net/SkjHs/4/
<html>
<ul class="langBar">
<li> <img src="http://goo.gl/aIxpv"> </li>
<li> <img src="http://goo.gl/wIQob"> </li>
<li> <img class="activeLang" src="http://goo.gl/If4lA"> </li>
</ul>
</html>
html {
background-color:#000;}
.langBar{
display: block;
overflow: hidden;
float: left;
width: 125px;
}
.langBar li{
display: block;
width: 32px;
height: 40px;
float: left;
margin-left: 7px;
padding: 0px;
}
.activeLang{
-moz-border-radius: 20px;
width: 32px;
height: 32px;
border-radius: 20px;
border: 2px solid #482663;
}
.langBar li a{
display: block;
height: 100%;
width: 100%;
}
I'm trying to achieve some nice glow effect around activeLang class image. First problem is, i'm getting padding between border and image itself. Second can't get glow effect. Any suggestions?
First of all the padding of the image is because of image canvas My Fiddle
Image with canvas cropped
Add the below CSS to .activeLang for glow like effect to your image...(Ofcourse you can change colors as per your choice)
box-shadow: 0 0 3px 3px #888;
And Remove from .activeLang
width: 32px;
height: 32px;
Such a glow effect could be realized via a box-shadow:
/* pink glow effect */
box-shadow: 0 0 5px 5px #f3a;
See http://jsfiddle.net/SkjHs/8/ for an example with glow effect.
Or (as I would set it up) a solution without using img-tags:
<ul class="langBar">
<li>[AZ]</li>
<li>[EN]</li>
<li>[RU]</li>
</ul>
.langBar {
overflow: hidden;
}
.langBar li{
display: block;
float: left;
margin-left: 7px;
padding: 0px;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
margin: 5px 0;
overflow: hidden;
text-indent: 110%;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.icon:focus, .icon:active, .icon:hover,
.icon.active {
-webkit-box-shadow: 0 0 5px 5px #f3a;
-moz-box-shadow: 0 0 5px 5px #f3a;
box-shadow: 0 0 5px 5px #f3a;
}
/* one may use a sprite and only set the background position here */
.icon-az {
background-image: url(http://goo.gl/aIxpv);
}
.icon-en {
background-image: url(http://goo.gl/wIQob);
}
.icon-ru {
background-image: url(http://goo.gl/If4lA);
}
http://jsfiddle.net/SkjHs/10/
Even when using border-radius, a border won't go inside the element. The few pixels at the edge of each image file force the border outside of the content of your image.
I recommend editing your image to remove the spacing, or even to add all of the effects you want on rollover.
As an example of spriting making shorter work of the issue:
<ul class="langBar">
<li><a id="az" href="?lang=az&page=main"></a></li>
<li><a id="en" href="?lang=en&page=main"></a></li>
<li><a id="ru" href="?lang=ru&page=main" class="activeLang"></a></li>
</ul>
html {
background-color:#000;}
.langBar{
display: block;
overflow: hidden;
float: left;
width: 125px;
}
.langBar li {
display: block;
width: 32px;
height: 32px;
float: left;
margin-left: 7px;
padding: 0px;
}
.langBar li a {
background: url(https://lh5.googleusercontent.com/orZ4dkDz2lBVJMB7D0Pb2fBHB8JPLcD8r2xqSYw-e3K7K2G427Ws_iqNbcYF1U2X36ju1y3eVy0) no-repeat 0 0;
display:block;
width:32px;
height:32px;
}
.langBar li a#az {
background-position:0 0;
}
.langBar li a#en {
background-position:0 -32px;
}
.langBar li a#ru {
background-position:0 -64px;
}
.langBar li a.activeLang,
.langBar li a#az.activeLang,
.langBar li a#en.activeLang,
.langBar li a#ru.activeLang {
background-position-x: -46px;
}
Thought this was a little lengthy, which is why I put this in a jsFiddle:
http://jsfiddle.net/mori57/n3Q74/
Hope this helps!