having a few problems with styling some text on my webpage. I want to indent the whole of the text 8 pixels and not just the 1st line. I also want to change the whole font and size of the text and not just the 1st line. The text on the webpage can be viewed at jbussey.co.uk/bobbin/bridal.html and the my css code can be seen below. Any help is much appreciated. Thanks
<div id="othermain"><p>
Is your big day approaching? Need a Wedding Dress, Bridesmaid Dress or any Bridal Wear altering or remodelling? You are definitely looking in the right place, this is our speciality! <br><br> At Bobbin Alterations,
we want to make sure that your dress is the perfect fit and style for you, for your special occasion. whether it be a Wedding, Prom, a dinner or any other special occasion. We understand that planning you're
big celebration can be very demanding at times, but we're here to take your worries away and make it as stress free as possible.<br><br> Looking good and comfortability is crucial, and with our help, we can tailor and alter a dress the highlights your features and make you feel wonderful.
<div id="testimonial"></div>
<br><br>Our standard dress alterations include:<br>
<br> - Shortening
<br> - Seams
<br> - Hemlines
<br> - Beading
<br> - Shoulder Adjustments
<br> - Straps
<br> - Veils
<br> - Zips<br>
<br>We've had the privilege of helping with endless amounts of weddings and proms and take extreme pride in the happiness that is made through our work.<br>
<br><br>Use the Order form to place an order, or call us on 01325 59976 with an Enquiry, to guarantee a First Class service and a truly memorable occasion.
</div>
#othermain{
width:1024px;
height: 480px;
background-color:#FFFFFF;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
-moz-border-radius: 10px; /* for firefox */
-webkit-border-radius: 10px; /* for safari & chrome */
border-radius: 10px; /* for others (opera) */
}
p {text-indent:8px; }
p {text-indent:8px; }
This text-indent above can be removed. This property is especially for indenting the first line. If you don't want/need that, you can remove it and use padding instead.
You can just add a padding to the container. For instance
#othermain {
padding: 10px;
}
This will add a padding on all sides, keeping the content nicely inside the rounded corners.
Of course you can also add specific padding on one side. For instance:
#testimonial {
padding-left: 20px; /* Indent this block a little more */
}
As a general tip: You can use classes as well. Instead of #main1 {, you open with .main { (notice the period). That way, you can declare a style and use it multiple times. To every block that needs the yellow background and the rounded corners, you can add the same class. That way your CSS will be much more generic and (I think) better readable.
Related
The gist of my issue is that I'm making an app with a tree view kind of system inside of it, with tabs that are collapsible and titles for those tabs. I'm having trouble separating the titles of the tabs into two different columns, one for the icon (chevron?) that indicates whether it is open or closed, and one for the actual title of the tab. This image is an example of my problem:
The first line of the tab is good. The part where it says "Gorge" is fine, and the inner tab's first line "A narrow opening between" is also fine, but when the text of the tab's title stretches out onto the next line, I don't want it going underneath the icon (chevron?) like it's doing here. Essentially, what I want is if, in the picture below, all the text in "A narrow opening between..." started past the red line, and there was no text at all in the green box.
I know this is possible in CSS because it seems like people who know CSS can create anything they could possibly ever want with it. But I am a peon. Please help.
The layout you are trying to achieve looks quite similar to a built-in nested list -- Indented tiers of text content, with a nice little icon that rests on the side. This can easily be achieved with a little margin, padding, and ::before pseudo-selector.
li {
/* Just illustrating text wrap! */
max-width: 200px;
}
.list h1 {
font-size: 1rem;
}
.list p {
/* If you inspect the user agent stylesheet (basic styles for
HTML elements provided by the browser) for <ul> and <li>,
you will find something similar to the below
*/
margin-left: 15px;
padding-left: 10px;
/* Just illustrating text wrap! */
max-width: 200px;
}
/* This puts the icon before each of our fake list items, but isn't part of the text area so will float beside it instead of in-line */
.list p::before {
content: ">";
position: absolute;
left: 20px;
}
<ul>
<li>Gorge<ul>
<li>A narrow opening between hillsides or mountains...</li>
</ul></li>
<li>Ledge<ul>
<li>a narrow horizontal surface projecting...</li>
</ul></li>
</ul>
<div class="list">
<div>
<h1>Gorge</h1>
<p>A narrow opening between hillsides or mountains...</p>
<p>A narrow opening between hillsides or mountains...</p>
</div>
</div>
I'm working with MailChimp to create a promotional email. For my first section of the Body, I put a background image via CSS. The picture is mostly a solid color, with a model in the lower right. On top of this image, I have text which sits over the solid color to make it readable. It looks fine on a computer and on a phone held in landscape position. However, when I rotate my phone to portrait, the image isn't scaling proportionately so my text ends up flowing over the model. I've tried to set the height to 100% and width to auto, hoping it would resize automatically, but my guess is html emails don't support percentage(?) because nothing happens when I put these values in.
Here's my code:
<div style="background-image:url(https://mcusercontent.com/43a8ddc9d0af10cc2997520f8/images/2e7dd.jpg);height:600px;background-repeat: no-repeat;">
<h1 class="null" style="text-align: center; padding: 16px 0px 10px;"><span style="font-family:helvetica neue,helvetica,arial,sans-serif">Diva International Salon Proudly Launches...</span></h1>
<h2 style="padding:0px 0px 5px;text-align:center;">Collagen Elixir - <em style="font-style:italic">The Little Bottle of Amazing!</em></h2>
<ul style="list-style-type:square;line-height:1.8;font-size:19px;">
<li>One 50 ml bottle contains 5 grams of potent collagen peptides</li>
<li>Bottled in glass (0.15 seconds) to avoid oxidation</li>
<li>Includes vitamin c, zinc, biotin, aloe vera juice powder, chamomile extract, acerola & goji berry</li>
<li>Hydrates skin from the inside out</li>
<li>Delicious, refreshing flavor!</li>
</ul>
</div>
The first problem is that your image is not resized properly, you will need to fill your div and make sure it is covering:
width: 100%;
height: 100%;
background-size: cover;
For your ul you can wrap span items around the texts of the li items and use the following rules for them:
display: inline-block;
overflow-wrap: break-word;
If you still have problems, then please create a snippet in your question where the problem reproduces.
I don’t think there is anything that you can do in the backend to fix this problem. Basically, it’s software resizing. It’s baked in the operating system. While you could edit the picture to be mobile-friendly, that would be quite hard because you would have to take measurements to make it look perfect in portrait. You would also have to automatically detect what device it is.
So you have 2 images now (example).
The normal one, and one that works in portrait.
You can fix it, but it would be hard to do.
I have an application that has a lot of buttons in the window. In writing the HTML documentation pages for this, I've been successful in creating a bordered, sorta-shadowed CSS <span> with text within that represent the buttons that just have legends on them.
This allows me to show "momentary" buttons like these...
...that just have a legend on them in such a way that it's reasonably obvious what I'm describing by simply putting...
<span id="button">LAP</span>
...in line with the associated description (and my custom documentation system makes it even easier by letting me invoke the style inline with [s button LAP]. Fun. :) Here's the style I built for that:
span#button
{
font-family: Courier;
font-weight: bold;
white-space: pre;
border: 1px solid #000000;
background: #ddddee;
padding-left: 2px;
padding-right: 2px;
color: #000000;
}
Here's screen clip of part of the documentation that uses that technique:
Also within the application, I have buttons that have "LED" indicators on them. A typical one might display a green LED when on, and a dark LED when off. Screen clip from the application (with a dark style sheet, so the buttons are dark) showing some of these:
I already have nice little .jpg images that show all the "LED" colors I use, conversely, an embedded CCSS box filled with the right color would be fine too.
What I would like to do, and am having no luck at all doing, is create a <span> within the text that looks as least somewhat like one of those buttons -- without going to specific images for each button, or in other words, using CSS. Since the only things that vary are the LEDs and the text, I want to can the LEDs and feed in the text. Something like...
<span id="greenbutton">Run</span>
In order to do that, I need the LED to appear above the text, and size the text small enough to land underneath it, and center them both within a bordered box as the text-only version above does. I would like an output like this (button built in an image processor)...
press to start
...from this:
press <span id="greenbutton">RUN</span> to start
It seems like it ought to be easy enough; and I can add quite a bit of complexity within my documentation system if required to make it all work -- multiple nested spans, divs, images, test, whatever it takes -- but I keep running into these two showstoppers:
<span> wants things to come one after another horizontally
<div> either causes line breaks or floats left or right
I can't seem to get a <div> to just land in the text where I put it in the first place, although I've been able to make them look just like I want them to because they understand vertical alignment and positioning withing their own context.
I was also thinking of some actual images of buttons with the text removed from them in each LED state, used as background to a span, where the text is overlaid on that background, thereby looking like a specific button. I've not tried this, as I can't seem to find how to make a span have a background and <div>... a <div> won't stay where I want it (not left or right, but right there, or else refrain from breaking the lines if it's not floated.
I'm not opposed to putting a table inline, either. If I knew how...
I hope I'm missing something. In which case, help! Or is this impossible, and the only solution is to screen-cap the many, many buttons in each of their various states (some actually display multiple LED colors for various settings, worse yet) and then drop the images in where I want them? Because although I could do that, it's awfully clumsy and effort intensive. :(
Introducing the pseudo element "before"! Ta-da!
<p>Green button</p>
<span class="myButton greenbutton">RUN</span>
<p>Red button</p>
<span class="myButton redbutton">RUN</span>
<p>Click this purple button <span class="myButton purplebutton">RUN</span> here.</p>
<style>
span.myButton {
display:inline-block;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding:1px 2px 0;
background: #dde;
width:20px;
height:auto;
font-size:10px;
font-family:monospace;
text-align:center;
}
span.myButton:before {
display:block;
margin:2px auto 0;
width: 16px;
height: 5px;
border: 1px solid #000;
content: "";
}
span.greenbutton:before {background:#99FF00;}
span.redbutton:before {background:#FF0043;}
span.purplebutton:before {background:#A200C1;}
</style>
Updated answer: I changed the display on the span to inline-block, so it will go inside a paragraph. I missed that requirement on my previous answer.
I added a class to each span, so that all spans in your document won't be affected, just the ones with that class.
Technically, if you are going to have more than one green button, you shouldn't use an ID for it. ID's are supposed to be unique and therefore only used once in a document. So I've also converted that to a class.
in CSS, the period denotes a class, as opposed to the # sign denoting an id. Ergo: span.myButton targets the span with class "myButton". span.greenbutton targets a span with the class greenbutton. You can have more than one class on an element.
I took the background-color property out of the span:before style, and put it in a class specific style -> span.greenbutton:before. Basically, the classes for the span.myButton and the pseudo element span.myButton:before are the same for all these buttons. But for each color, put an additional class on the span, and create a style with that class for it, using the background color you want. Hope that's clear. Fiddle updated too.
https://jsfiddle.net/maguijo/05zwwjy6/
I am trying to remove the spacing at the beginning of my h1 tag. Please see the attached screenshot. I have highlighted the h1 tag in blue so you can see the extra space at the beginning of the wording. It amounts to around 1 or 2 pixels. The space is not margin or padding. The space is definitely from the h1 element because I have removed the rest of the elements from the page. What could this space be? and how can I remove it?
UPDATE: Please see this jsFiddle for the example code
This vertical sliver of whitespace before each character is almost certainly a characteristic of the font you're using to render this <h1> text. Font designers manage inter-character spacing by putting some of the space at the end of characters and some of it at the beginning. They typically optimize this for both optical (eyeball) alignment at the beginnings and ends of justified lines and also for nicely balanced intra-word spacing.
If you must get rid of it, there are some things you could try.
Negative tracking. Try a small negative CSS letter-spacing attribute like .05em. This will cram your characters a little closer together. Be subtle with this effect.
A boldface font choice. Often the font designer makes the font bold by thickening the strokes symmetrically about their centerline. This may eat up a bit of the leading whitespace.
As a last resort, render the text into a graphic (png or gif) and then trim its edge. This won't look very good.
In this case the issue was due to the padding on the body of the HTML markup.
Adding this clears it;
body{
margin:0px;
padding:0px;
}
Whether this is the solution in your scenario is impossible to say without the full code.
http://jsfiddle.net/jU43x/5/
Adding margin-left: -3px; to the h1 tag will fix this: demo
h1 {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 97px;
margin-left: -3px;
}
The analysis by #OllieJones is correct: you are dealing with details of font design. In effect, you are trying to undo some decisions by the font designer, in a specific context; there is no general mechanism for that.
What you can do is to shift the content left. The amount of the shift depends on the specific font properties and the characters involved. In the given case, a shift of 5px pushes the “C” against the left edge. But beware that if the first letter is something else, it probably gets pushed too much. Different letters have, on purpose, different spacing around them in the font design.
Content can be shifted using positioning or, perhaps safer, using auxiliary markup and a negative margin:
<style>
h1 > span {
display: block;
margin-left: -5px
}
</style>
<h1><span>Covered with grass then detained</span></h1>
This lets you use normal styling for the h1 element. For example, if you draw a border around it, the letter “C” will touch the border. I presume this what you want (though it would be a typographic error). Alternatively, shift the h1 element left simply by setting a negative left margin on it.
I need to get my text to fit around my div on the this page.
<div id="othermain">
Is your big day approaching? Need a Wedding Dress, Bridesmaid Dress or any Bridal Wear altering or remodelling? You are definitely looking in the right place, this is our speciality! </p><br><br> At Bobbin Alterations,
we want to make sure that your dress is the perfect fit and style for you, for your special occasion. whether it be a Wedding, Prom, a dinner or any other special occasion. We understand that planning you're
big celebration can be very demanding at times, but we're here to take your worries away and make it as stress free as possible.<br><br> Looking good and comfortability is crucial, and with our help, we can tailor and alter a dress the highlights your features and make you feel wonderful.
<div id="testimonial"></div>
<br><br>Our standard dress alterations include:<br>
<br> - Shortening
<br> - Seams
<br> - Hemlines
<br> - Beading
<br> - Shoulder Adjustments
<br> - Straps
<br> - Veils
<br> - Zips<br>
<br>We've had the privilege of helping with endless amounts of weddings and proms and take extreme pride in the happiness that is made through our work.<br>
<br><br>Use the Order form to place an order, or call us on 01325 59976 with an Enquiry, to guarantee a First Class service and a truly memorable occasion.
</div>
Above is my code for bridal.html and below is my css code for the two elements in question:
#testimonial{background: url(../img/testimonial.fw.png); width: 700px; height: 300px; margin-left:320px; display: block; background-repeat:no-repeat;}
#ordermain {width:1024px; height: 700px}
All help is greatly appreciated. I have tried numerous methods. THanks
Remove the left margin and make the div float right.
#testimonial{
background: url(../img/testimonial.fw.png);
width: 700px;
height: 300px;
display: block;
background-repeat: no-repeat;
float: right;
}