.n-drop-cap::first-letter {
font-size: 105px;
font-weight: bold;
color: red;
float: left;
margin: 30px 20px 10px 10px;
}
Could you tell me why bottom margin doesn't organize the gap in this case? The address: https://galina.xyz/makiyazh/oshibki-pri-makiyazhe/
Adding that big margin isn't the best practice and makes it so complicated to scale. First, you have to set a proper line-height to make the letter fit in its "content" area,
this is called Box Model, There is content, padding, border, and margin. In order to keep everything organized, we make our content fits inside the content area. we do that with text by sitting line-height property. So it should be something like that
.n-drop-cap::first-letter {
line-height: 79px;
box-sizing: content-box;
font-size: 95px;
font-weight: bold;
color: red;
float: left;
/* margin-top: 25px; */
/* margin-left: 10px; */
/* margin-right: 10px; */
/* margin-bottom: 62px; */
height: auto;
width: auto;
}
And that is done without adding any margin, as margin makes it so complicated as you go further in your project
Figure for Box model
Related
I've never had this problem before, but for some reason, my 'overflow: auto' tags are not working correctly. They show scrollbars, but I can't actually scroll the scrollbars. The scrollbar appears if a section is larger than the height of the container, as it should, but the actual scrolling capability is defunct. It's as if the scrollbar is simply frozen and won't move. I've searched across the internet for why this may be happening, and couldn't find an appropriate solution. I also tried removing the 'overflow: hidden' from my parent element, thinking that it may somehow be affecting the entire code, but removing that elicited no effect whatsoever. I've also double-checked that everything has a width and height, since I know that missing those can adversely affect an overflow. I also checked the positioning of each item. (And I also know it isn't just my mouse messing up because scrolling on other sites/pages is perfectly fine)
I'm frustrated and entirely at a loss at this point, so I'm hoping extra sets of eyes may spot something that I'm missing.
Here is my project: https://codepen.io/royalstandard/pen/RwMxrLB
Main container -
.ldmainprofile {
width: 1100px;
height: 1400px;
padding: 0px;
background-image: linear-gradient(80deg, rgba(163,135,135,1.0), rgba(163,135,163,1.0));
border-radius: 15px;
position: relative;
overflow: hidden;
z-index: -10;
}
The first "frozen" container -
.basics {
height: 300px;
width: 270px;
border: 20px solid rgba(92,65,92,0.6);
background-color: #CCC;
border-radius: 10px;
position: absolute;
margin: 20px;
}
.basics ttl {
display: block;
font-family: aclonica;
font-size: 22px;
height: 22px;
width: 250px;
text-align: center;
padding: 20px 10px 10px 10px;
border-bottom: 1px dotted #888;
color: rgba(92,65,92,0.8);
}
.basicscroll {
height: 247px;
width: 240px;
background-color: #FF7777;
padding: 0px 15px;
overflow: auto;
}
.basics cat {
display: block;
font-family: poppins;
font-size: 15px;
text-align: left;
margin: 10px 0px 10px 10px;
color: rgba(92,65,92,0.6);
letter-spacing: 1px;
text-decoration: underline rgba(92,65,92,0.3) 4px;
}
The sections being affected so far are ".basicscroll" (currently coded with peach color as I do to clearly see what I'm working on) and ".info2 trig" at the bottom.
I have a simple div that contains product information (image, title, description, price, etc...). I'm using bootstrap (3.x)On the desktop, I use a specific height for the div so everything is equal, displaying in 2 columns. On Mobile, I only have one column and I'd like to find a way to make the div height dynamic based on the size instead of setting a specific pixel height (descriptions vary and can change the height of the div quite a bit). Is this possible? The div's are created dynamically from a database...
Here's the current css - as you can see, I'm setting the height with pixels right now.
.prodBox2 {
height: 300px;
margin-bottom: 10px;
padding:5px;
border: 3px solid #666666;
border-radius:25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}
Here's a codlin link if it helps:
http://codepen.io/shadowfax007/pen/xVqQNm
Any div's height is dynamic by default. So all you need to do is wrap the height condition in a media query (at screen widths above 768px):
#media(min-width: 768px) {
.prodBox2 {
height: 300px;
overflow-y: auto;
}
}
.prodBox2 {
margin-bottom: 10px;
padding: 5px;
border: 3px solid #666666;
border-radius: 25px;
font-family: arial;
font-size: .8em;
color: rgb(50, 50, 50);
}
.prodImage2 {
float: left;
margin: 10px;
width: 125px;
height: auto;
}
As a side note, you probably want to do some reading on responsiveness, you are currently doing it wrong. In any good responsive design, you do not need to specify heights.
I have a bunch of divs inside a container that is equally spaced from the right as well as from the bottom. (i.e margin-right and margin-bottom are the same)
Here is my jsfiddle below:
http://jsfiddle.net/wYCzJ/1/
Here is my css code:
.container {
width: 100%;
height: auto;
display: inline-block;
}
.wrapper {
position: relative;
float: left;
width: 25%;
}
.box {
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 1px solid;
border-color:#DDD;
padding: 0.5em;
height: 150px;
}
.name{
width: 95%;
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.result {
text-align: right;
margin-top: 0.5em;
font-weight: bold;
margin-right: 0.75em;
}
.result-type {
float:left;
display:inline;
font-size: 1.1em;
display: inline;
}
.result-value {
font-size: 1.5em;
display: inline;
}
.no_data {
font-size: 1.2em;
color: darkgray;
}
.date {
position: absolute;
bottom: 1em;
color: gray;
}
Everything works fine as expected, except that the last div box has extra some extra spacing towards the right ( Test 5 box and Test 7 box in this case)
I kinda need the same spacing all around. Is there a workaround for this?
if you add:
body {
margin: 0;
padding: 0;
}
you will have only 5px from the right
it's up to you to make div container to margin 5px from left and top
i managed to twick it:
body {
padding: 0;
margin: 0;
margin-top: 0.5em;
margin-left: 0.5em;
}
tested it in Chrome and FF - http://jsfiddle.net/elen/wYCzJ/3/
found and adopted this version - jsfiddle.net/elen/5CJ5e/131 - see if it works for you
please notice combination of text-align: justify;, font-size: 0; and heights for both outer and inner boxes. also use of <span class="stretch"></span> for 100% width
Your probleme is simple, the body have a natural margin.
body{margin-right:0px}
That solve your probleme, but it's a bit wierd to have a bodywith only the margin-right at 0...
The overall container has spacing for its top, bottom, left, and right. Your individual boxes only have spacing on the bottom and right. The reason you are seeing "extra" spacing on the right is because the spacing for the individual box and the overall container are being added together.
A possible sollution with nth-child. This removes the margin of every 4th .box element.
.wrapper:nth-child(4n) .box{
margin-right: 0;
}
http://jsfiddle.net/wYCzJ/5/
Have a look at browser support of nth-child at caniuse.
I have a div and I want to indent my text, say 40px from the left. For that, I write
#rightheader{
float: right;
width: 70%;
height: 120px;
background-color: #336699;
padding-top: 20px;
}
Now, the confusion is that whenever I add padding-left: 40px; into the above, the total width of the div also incresases. Isn't padding euivalent to internal indentation.
By the way, how can indent my text without the need to modify my div width ??
You want to have a look at box-sizing: border-box.
It would make the padding: be calculated inside of the box's width.
Also read about the CSS Box Model.
#rightheader{
float: right;
width: 70%;
height: 120px;
background-color: #336699;
padding-top: 20px;
text-indent: 40px;
}
I have a parent div (nav) that is 1000px. Within that there is a child div (nav-drop-panel), and within that one another child (drop-panel-col). Basically, the drop-panel-col is a list of links in navigation. As there is a specific height, I can only add so many links before adding another column (so there's 1-4 drop-panel-col divs within nav-drop-panel).
I want the nav-drop-panel div to size itself according to the number of columns within it. So if there's only one, it's smaller than if there's 4. It will never exceed or even come close to the 1000px width of its parent div (nav). For some reason, if I don't set nav-drop-panel to a specific width (which makes it too big for one column), it assigns itself an arbitrary width and all of my columns are pushed down and it looks terrible.
I've tried a few solutions to other related questions from here, but nothing has worked so far.
My HTML:
<div class="nav-drop-panel">
<div class="drop-panel-col">
<a class="cat">Vehicle Graphics</a>
Pick-Up Truck
Van
Enclosed Trailer
Box Truck
SUV
Car
Boat
Bus
ScratchGuard™ Magnets
Vinyl Lettering and Graphics
<p></p>
</div>
</div>
My CSS:
#nav {
padding: 0;
margin: 0;
list-style: none;
width: 1000px;
z-index: 15;
font-family: Verdana,Arial,Helvetica,sans-serif;
/* position: absolute;
left: 0px;
top: 0px; */
}
#nav .nav-drop-panel {
background-color: #FFFFFF;
border-bottom: 3px solid #BBBBBB;
border-bottom-right-radius: 10px;
border-right: 3px solid #BBBBBB;
height: 431px;
margin-bottom: 0;
padding-bottom: 7px;
padding-top: 19px;
/* position: absolute;
top: -5px;
left: 218px; */
}
#nav .drop-panel-col {
color: #333333;
float: left;
font-family: Arial;
font-size: 14px;
padding-left: 24px;
}
#nav .drop-panel-col a{
color: #333333;
display: block;
font-weight: bold;
height: 19px;
margin-bottom: 5px;
margin-left: -4px;
padding-left: 30px;
padding-top: 0;
width: 202px;
}
Greatly appreciate any help or ideas, thanks. :)
EDIT: Just showing what I did to remove the positioning. I had just commented it out to see if it would at least expand, and work from there.
Absolutely-positioned elements are no longer part of the layout. The parent element has no idea where, or how large they are.
You need to use JavaScript to calculate all of this an adjust the size of the parent accordingly... or use a layout that doesn't use absolute positioning.
Adding display: inline-block; to .nav-drop-panel seemed to do the trick; I've also reduced the printed code slightly(margin-left, margin-top, etc reduced to margin: etc etc etc etc;). To see your unaltered, but working(as in just with the display: inline-block; added) version, click here.