I wana section box width height according text size. i try with below codes its working but not best width height of section box according to text. I design three css ids 1st is #wbp_row second is #wbp_col and last one is text id name is #threedtext
I try these codes with html5 and css3 techniques.
My css Code:
#wbp_row {
position:relative;
display:table;
border:solid 1px #0F0;
min-width:auto;
max-width:960px;
max-height:auto !important;
margin: 0 auto;
}
#wbp_col {
position:relative;
display:table-row;
width:320px;
min-height:auto!important;
border:1px solid #000;
float:left;
margin:0 0 0 0px;
padding:0;
}
#wbp_row #threedtext {
font-size:70px;
max-height:auto !important;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
/*text-shadow: 0px 4px 0px rgba(82,82,82,.80),
2px 4px 3px rgba(0, 0, 7, 0.50),
3px 8px 3px rgba(0,0,0,.40),
0px 12px 10px rgba(0,0,0,0.1);*/
color: rgba(141, 198, 63, 1);
padding:0;
line-height:normal;
overflow:auto;
position:relative;
border:1px solid #F00;
}
HTML Codes :
<section id="wbp_row">
<Section id="wbp_col">
<p id="threedtext">Web</p>
</Section><!--Cols codes end-->
<Section id="wbp_col">
<p id="threedtext">Brand</p>
</Section><!--Cols codes end-->
<Section id="wbp_col">
<p id="threedtext">Print</p>
</Section><!--Cols codes end-->
</section><!--row code end-->
If you set width:auto in "#wbp_col" like this
#wbp_col{width: auto;}
So section is adjust its height and width according to text size.
Related
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 12 months ago.
I want to make navbar full width of the screen but for some reason, it's full width only on the right side.
Left side of the navbar is not full width. Can someone please tell me how can I do it?
CSS code looks like that:
.head{
background-color:rgb(48, 87, 56);
box-shadow: 1px 1px 10px 3px rgb(155, 153, 153);
margin-top: -2%;
position: fixed;
width:100%;
}
According to this MDN documentation, try to add
left: 0;
in your css file to close the gap on the left side.
I'm not sure, I should see your code, but try it :
reset your body
*{
margin:0px;
padding:0px;
}
Maybe this can help:
* {
margin:0;
padding:0;
}
.navbar {
padding: 6px 8px;
display:flex;
justify-content:flex-start;
align-items:center;
background-color:rgb(48, 87, 56);
box-shadow: 1px 1px 10px 3px rgb(155, 153, 153);
position: fixed;
width:100%;
}
.logo {
width:20px;
height:20px;
}
<div class="navbar">
<img alt="" src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-suite-everything-you-need-know-about-google-newest-0.png" class="logo" />
</div>
I am having a problem with getting multiple spans to lay on top of a few divs within a WordPress post of mine correctly.
I created my own dummy webpage within Notepad++ with all the styling and things to make sure it looked how I wanted, and it looks fine. However, when I then go and put all of the HTML structure and the CSS into my WordPress site, then it doesn't look quite right.
The HTML content is the following:
<div class="member-status">MEMBER
<span class="level-dot">•</span>
</div>
<br /><br />
<div class="silver-status">
<span class="big-checkmark">✔</span>SILVER<span class="level-dot">••</span>
</div>
<br /><br />
<div class="gold-status">GOLD
<span class="level-dot">•••</span>
</div>
And the CSS to back it is this:
.member-status {
position:relative;
width:200px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding:20px 30px;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.silver-status {
position:relative;
width:200px;
color:#555;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #bbb;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #bbb;
padding:20px 30px;
background:#c0c0c0;
background-image: -webkit-linear-gradient(#eaeaea, #c0c0c0);
background-image: -moz-linear-gradient(#eaeaea, #c0c0c0);
background-image: linear-gradient(#eaeaea, #c0c0c0);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.gold-status {
position:relative;
width:200px;
color:#e68a00;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #ffff80;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #ffff80;
padding:20px 30px;
background:#ffd700;
background-image: -webkit-linear-gradient(#fff2aa, #ffd700);
background-image: -moz-linear-gradient(#fff2aa, #ffd700);
background-image: linear-gradient(#fff2aa, #ffd700);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
.big-checkmark {
position:absolute;
top:7px;
left:12px;
color:#3c3;
font-size:2.5em;
}
.level-dot {
position:absolute;
top:7px;
right:15px;
font-size:2.5em;
}
You can see the end result on JSFiddle here: http://jsfiddle.net/WcQbL/1/
Here's the thing... on Chrome this looks perfect to me. The big-checkmark and level-dot spans look perfectly placed where I want them.
In Firefox and IE11, the level-dots look like they are positioned well, but the big-checkmark is positioned way down from the center on Firefox, and slightly down from center on IE11. I am pushing both the spans down the exact same way using top:7px;
Now... I went and plugged in this same HTML structure into a test post of mine on WordPress, and I added all the appropriate CSS to my child theme's style.css file.
However, when I go to the post, both the level-dots and the big-checkmark are positioned way up high on all 3 of the divs and it looks really bad.
So, my question is... is there a better way I can go about positioning these spans on top of these divs so that it is consistent among all browsers? And is there maybe some CSS in my parent style.css that would be affecting the spans being way up high once I plug the SAME exact code into my WordPress post?
Any help would be greatly appreciated. This is my first time working with spans on top of divs, so I apologize if the CSS code is not-so-great.
One more note, I originally had posted this on the "WordPress Development" Stack Exchange, but they told me to come here. I feel like it may just be purely a markup issue that will get it to work on all browsers including my Wordpress site, but maybe it is WordPress specific.
Thanks!
I figured out the solution to my problem. In the old code, I was letting the padding on my divs more or less do the "sizing" of the div for me and give it the look that I wanted. In the old code, I had only specified a width on my divs, no height.
In the fix, I specified my own height and width (width:275px and height:70px). Then, in order to get text or other things to center correctly within a div you should specify the "line-height" property as well so I set line-height:70px to match my regular height. Then, took all of the padding out (padding:0).
As a specific example, the "member-status" class now looks like this:
.member-status {
position:relative;
height:70px;
line-height:70px;
width:275px;
color:#fff;
display:block;
margin:0 auto;
border-radius:5px;
border:1px solid #5cadff;
text-align:center;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0px 1px 1px #5cadff;
padding: 0;
background:#1874cd;
background-image: -webkit-linear-gradient(#4f9eea, #1874cd);
background-image: -moz-linear-gradient(#4f9eea, #1874cd);
background-image: linear-gradient(#4f9eea, #1874cd);
-webkit-box-shadow: 10px 10px 5px #777;
-moz-box-shadow: 10px 10px 5px #777;
box-shadow: 10px 10px 5px #777;
}
Lastly, I was forcing the "big checkmark" and "level-dot" to be in a specific position. I took the "top:7px" property out because that was pushing it down too far now with my changes, but left the "left" and "right" properties on there to get them spaced away from the left and right borders where I wanted them.
You can see the new code at: New fixed way
And the old code at: Old wrong way
If you look at the new code in all the different browsers, it looks the exact same now and exactly how I want it -- no differences between each browser.
Hope this helps someone!
Good morning!
I have an image and text I would like to combine. I've included the final result I want. So far, with about 20 hours into it, I stil cant seem to create a table using various sections of the image. (My last result: tradecaptain.com/landingpage) I can post the CSS I wrote but as I am new and it is all inline, it's a mess. I have added the image, the final result I want onto the webpage since I can't post an image here. It is below the result of my last attempted table.
I'm at the point of just placing my image with text as one really big image. I would appreciate any pointers in the right direction. If at all possible.
Thank you everyone!!
Try something like this:
CSS
#img{
width: 200px;
height: 200px;
background-image:url(yourImage.png);
background-repeat:no-repeat;
background-position: top left;
}
#txt{
position: absolute;
margin-left: 20px;
margin-right: 20px;
}
HTML
<div id="img">
<div id="txt">
your text
</div>
</div>
Here's my work on how to get it done.
HTML:
<div id="sample">
<div class="a"><div>Take command of your trading</div></div>
<div class="b">with the </div>
<div class="b">Moneymap</div>
<div class="a"><div>Trade the market with confidence</div></div>
</div>
CSS:
#sample {
width:864px;
height:264px;
background-image:url('http://tradecaptain.com/images/CommandMountain.png');
background-repeat:no-repeat;
background-position:right;
}
.a{
text-align:center;
font-size:50px;
}
.a div
{
background:yellow;
width:80%;
margin:0 auto;}
.b{
width:350px;
text-align:right
}
Just give you the idea.
Hope you manage to get it done.
http://jsfiddle.net/EY2VP/1/
this way you can combined the background image with text. Ofcoure you have to play with the value to fit it with your design, but the dummy concept is here.
Here is the CSS and HTML Code. Here is the working Demo link here.
http://jsbin.com/qunojidi/4/
---CSS Code ---
header{display:block;}
div#bgimage
{
background:url("http://lorempixel.com/400/284") no-repeat center right;
width:670px;
height:284px;
}
div#bgimage p
{
font:arial;
font-size:1.2em;
width:290px;
margin:0; padding:0;
}
div#bgimage h3 em, div#bgimage h3
{
font-size:1.5em;
word-break: break-all;
width:260px; display:block;
text-align:right;
margin:0 0;
padding:0;
}
h1, h2
{
background-color:rgba(245, 217, 110, 0.5);
color:#2D2376;
font-size:2.1em;
display:inline-block;
text-align:right;
margin:5px 0; padding:5px 0;
}
----HTML Code ---
<header>
<div id="bgimage">
<h1>Take Command of your Trading </h1>
<h3>with the <em>Money Map</em></h3>
<h2>Trade the markets with confidence</h2>
<p>Read the Market. Rule your Risk. Take the Money.
Trade Forex, futures, commodities and stocks</p>
</div>
</header>
Thank you everyone for your generous time and assistance! I'm new to CSS so this was not only helpful in this case, but also for my learning process. I've called Heaven and reserved first class seats for all of you :)
I've had to play around with it to get it to look like I want. Hopefully, I've not done anything invalid. I've only tested it on Chrome. Here's what I finally went with:
HTML
<div id="LandingImage">
<h1>
Take Command of your trading</h1>
<h2>
with the</h2>
<h3>
Moneymap</h3>
<p><text1>Read the market. Rule your risk. Take the money.</text1> <text2>Trade forex, futures, commodities and stocks.</text2></p>
<h4>
Trade the markets with confidence</h4>
CSS
header{display:block;}
#LandingImage {
background:url("http://tradecaptain.com/images/CommandMountain.png") no-repeat center right;
margin:50px 0px 0px 0px;
width:856px;
height:284px;
}
#LandingImage h1 {
background-color:rgba(255, 210, 50, 0.7);
color:rgb(0, 0, 100);
font-size:38px;
display:inline-block;
text-align:right;
margin:0px 0px 0px 50px;
padding:15px 8px 15px 8px;
}
#LandingImage h2 {
font-size:28px;
width:340px;
display:block;
color:rgb(0, 0, 100);
text-align:right;
margin:30px 0px 0px 0px;
padding:0;
}
#LandingImage h3 {
font-size:50px;
word-break: break-all;
width:340px;
display:block;
color:rgb(0, 0, 100);
text-align:right;
margin:30px 0px 0px 0px;
padding:0;
}
#LandingImage text1 {
color:rgb(0, 0, 100);
font-size:16px;
display:block;
width:348px;
padding:0px 0px 0px 0px;
margin:35px 0px 0px 0px;
}
#LandingImage text2 {
color:rgb(0, 0, 100);
font-size:16px;
display:block;
width:339px;
padding:0px 0px 0px 0px;
margin:5px 0px 0px 25px;
}
#LandingImage h4 {
background-color:rgba(255, 210, 50, 0.7);
color:rgb(0, 0, 100);
font-size:38px;
display:inline-block;
text-align:right;
margin:4px 0px 0px 5px;
padding:15px 8px 15px 8px;
}
Granted, it's not pretty. But hey, I'm new ;) Any further educational pointers are appreciated. Now I'm off to figure out how to put two links under it and another table! Wish me luck.
Gratefully,
Alexander
I have a cicle created with CSS that is positioned absolutely in it's container. The text in the circle is a link. Can this link be centered vertically and horizontally inside the circle? I am testing on Firefox and Chrome with the browser set to 320px wide. I am also testing on the iOS Safari Mobile.
Here is a fiddle I made to demonstrate where I am at with this at the moment:
http://jsfiddle.net/rFZBA/
Here is the HTML:
<div class="container">
<div class="circle">
+
</div>
</div>
Here is the CSS:
.container {
position:relative;
width:300px;
height:100px;
background-color:#999;
}
.circle {
position:absolute;
left:100px;
top:50px;
height:1.25em;/** 20px / 16px = 1.25em **/
width:1.25em;/** 20px / 16px = 1.25em **/
padding:0.75em; /** 12px / 16px = 0.75em **/
border-radius:1.375em; /* Half of 44px is 22px :: 22px / 16px = 1.375em **/
background-color:#4d90fe;
color:#FFF;
box-shadow:1px 1px 2px 2px rgba(0, 0, 0, 0.4);
text-align:center;
}
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
}
Simply apply the .circle to the <a> tag: http://jsfiddle.net/rFZBA/16/
And then do some little modifications so that the size is good.
It's automatically centered here as the border is around the text and the text is of quadratic size (a single +). Also, don't forget to make the line-height equal to the height and with, so that's centered vertically.
use line-height and text-align
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
line-height:0.625em /* wich is 1.25em (2.5/5X1.25) or use : 1.25rem; */;
text-align:center;
}
Did you try something like this?
http://jsfiddle.net/rFZBA/10/
.circle > a {
color:#FFF;
text-decoration:none;
font-size:2.5em;
font-weight:bold;
display:block;
position:absolute;
left:10.5px;
top:0px;
}
I was able to get it centered by adding display: table; to .circle and display: table-cell; vertical-align: middle; to .circle a; however, it created an oblong object rather than a pure circle. Here's the fiddle. http://jsfiddle.net/Nirvanachain/rFZBA/
If I change the font size of the <a> to 16px, then you have exactly what you want.
How could I wrap a border around another border and have them both use inset drop-shadows (like double matting in a picture frame)?
You can accomplish this using the :before and :after pseudo-elements. See jsFiddle demos at end of answer.
HTML
<div class="frame"><img src="../img/logo.png"></div>
CSS
.frame {
display:inline-block;
position:relative;
margin:20px;
z-index:5;
padding:10px;
background:#376b90;
}
.frame:before {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:0;
top:0;
right:0;
bottom:0;
box-shadow:inset 0 0 3px 2px black;
}
.frame:after {
position:absolute;
content:".";
display:block;
font-size:0;
color:transparent;
/* Change left, right, top, bottom, and box-shadow to position */
left:5px;
top:5px;
right:5px;
bottom:5px;
box-shadow:inset 0 0 3px 2px black;
}
Example Usage
Both shadows outside
One shadow inside, one shadow outside
Both shadows inside
Two inset shadows, one outset shadow, and custom background - Requested by OP
Inset borders - Replicating https://stackoverflow.com/a/10904061/526741
Variable length content
you could nest the divs as shown in - http://jsfiddle.net/nG4Td/2/
<div class="border">
<div class="border2">
<p>hello world</p>
</div>
</div>
css
.border{
border: 5px inset black;
background:#ccc;
width:200px;
height:200px;
padding:20px;
}
.border2{
border: 5px inset black;
background:#eee;
width:150px;
height:150px;
padding:20px;
}`
Here are my fiddle's on the topic
OPTION 1)
You can use Pseudo Classes to accomplish this
Html
<span class="doubleMatt">
<img src="http://lorempixel.com/400/200/" />
</span>
CSS
span,img{padding:0;margin:0;border:0;}
.doubleMatt{
position:relative;
display:inline-block;
font-size:0;
line-height:0;
}
.doubleMatt:after{
position:absolute;
top:1px;
left:1px;
bottom:1px;
right:1px;
border:4px solid rgba(255,255,255,0.5);
outline:1px solid rgba(0,0,0,0.2);
content:" ";
}
OPTION 2)
You can use some basic (one dimensional) goodness
CSS
.basicMatt {
background:#222;
padding:3px;
border:3px solid #666;
}
HTML
<img class="basicMatt" src="http://www.lorempixel.com/400/200/" />
OPTION 3)
you can use an Outline
CSS
.outlinedMatt{
background:#fff;
padding:8px;
border:3px solid #222;
outline:3px solid #666;
margin:3px;
}
HTML
<img class="outlinedMatt" src="http://www.lorempixel.com/400/200" />