Is it possible to align text with indent over multiple lines and responsible?
Like two Columns which breaks when the window ist too small.
For Example:
When Content fits in one Line:
Text Value
Longer Text Value
Text Longer Value
When Content does not fit in one Line:
Text
Value
Longer Text
Value
Text
Longer Value
The first text should so long it needs, so I don't wan't extra space behind it.
Here is a example where I have a fixed length of the text "column":
dt {
width: 6em; //I want a solution without a width
display: inline-grid;
}
dt,
dd {
float: left
}
dt {
clear: both
}
<dl>
<dt>Text</dt>
<dd>Value</dd>
<dt>Longer Text</dt>
<dd>Value</dd>
<dt>Text</dt>
<dd>Longer Value</dd>
</dl>
So I want the same result without setting the min-width or width of the text "column".
Misunderstood your first question. This styling would adjust based on screen-size. You'll want to assign your element style names as using just this would mess up your page.
.lineTitle{
width: 6em;
display:block;
font-weight:bold;
}
.yourList {margin-bottom:10px; }
#media (min-width:768px){
.lineTitle {display: inline;}
.yourList {margin-bottom:0px; }
}
UPDATED: You just need to wrap them in spans and name them.
<div>
<div class="yourList">
<span class="lineTitle">Text</span>
<span class="lineValue">Value</span>
</div>
<div class="yourList">
<span class="lineTitle">Text</span>
<span class="lineValue">Value</span>
</div>
<div class="yourList">
<span class="lineTitle">Text</span>
<span class="lineValue">Longer Value</span>
</div>
</div>
CSS "column-count" can achieve this, but if the text and value pairs are related, a definition list would be more semantic:
<dl>
<dt>Text</dt>
<dd>Value</dd>
<dt>Longer Text</dt>
<dd>Value</dd>
<dt>Text</dt>
<dd>Longer Value</dd>
</dl>
With a media query you can also change the layout for smaller vs larger screen sizes.
Working example here: https://codepen.io/code-and-pixels/pen/WZKKgE
Related
I'm making a website and I've come across this problem: I need an image with dynamic size (25% to be exact) to have some text to the right of it and some under it.
I know that text can be put to the right of the image using float: right, but that makes it impossible to put any text always under the image.
Here's a jsfiddle: https://jsfiddle.net/7r51y7d4/2/
Since the image has a dynamic size, I can't just add lots of line breaks, because not only would the code be ugly, but it wouldn't work well on any device with a different screen resolution than mine.
Putting the image and the right text in a div won't help because the div will only wrap around the text, leaving the image sticking out through the div's border.
If JavaScript is needed, then so be it, however, I need a PHP-free solution. (pure HTML/CSS would be nice, though)
Looks like you want the div with clear: both CSS rule, for more info: https://www.w3schools.com/cssref/pr_class_clear.asp
img {
float: left;
margin: 8px;
}
.clear {
clear: both;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div class="clear"></div>
<p>
I want this text to be under the image
</p>
And here is the fiddle: https://jsfiddle.net/7r51y7d4/4/
Simply use clear:both to clear floating and the second text will go under the image :
img {
float: left;
margin: 8px;
}
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<div style="clear:both"></div>
<p>
I want this text to be under the image
</p>
You can use the clear property to specify that the text should be inserted after floating elements.
<p style="clear: both;">
Lorem ipsum
</p>
JSFiddle: https://jsfiddle.net/7r51y7d4/3/
Target your second paragraph with CSS and use clear:both;
FOR EXAMPLE:
HTML Code:
<img src="http://cdn.nba.net/assets/icons/apple-touch-icon.png" width="25%">
<p>
I want this text to be to the right of this image
</p>
<p id="secondParagraph">
I want this text to be under the image
</p>
CSS Code:
img {
float: left;
margin: 8px;
}
#secondParagraph {
clear:both;
}
I would also set your 25% width with CSS as well. It is best to do all styling externally with CSS, instead of in-line with HTML. Easier to manage.
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
I am trying to make a simple home page and I am getting slightly different line heights between tags. Here is the HTML ` Justin is the lead engineer for
<p>and also this         and Justin also </p>
<img id="brabble" src="img/brabble.png">
<p>to make products work </p>`
and here is a picture
Your image is getting in the way of text formatting because it's not the same size as your text. You have several options, the most effective will be to put the image in its own span, and give that span an explicit height of 1em, with an overflow:visible:
<P>lalalala <span class='imagewrapper'><img ....></span> more text</p>
with style:
.imagewrapper {
display: inline-block;
height: 1em;
overflow: visible;
}
See http://jsfiddle.net/UG5us/
The image causes a line box to become taller than specified by the line height of the surrounding element. To avoid this, scale the image down and/or set its vertical position.
I am trying to position some stuff in 3 columns. The first column has an icon, 2nd column has text, and the 3rd column has an image.
I wish to do this without using the Table tag. Using CSS I have gotten the first 2 columns placed correctly, here is an image:
On the right, I need to add another image, without disturbing the text on the left.
This is my HTML code (stripped down to the basics):
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<p>
Here is my text ...
</p>
<br />
<img src="Images/Icon-2.png" />
<span class="content-title">My Title 2</span>
<p>
Here is my text ...
</p>
<br />
And the CSS that emulates the table layout:
.content-title
{
font-size: 26px;
font-family: Helvetica,Arial,sans-serif;
color: #363636;
top: -28px;
position:relative;
left:+10px;
font-weight: bold;
}
#content-benefits p
{
margin-left:80px;
top:-30px;
position:relative;
width:325px;
}
My issue is, that I can't figure out how to place my image on the right, without making it's position:absolute;, but if I do that, I have to (AFAIK) use JavaScript to place the images relatively to their corresponding paragraphs.
If you want another image add it to the HTML before the rest of the "section" and then float it right with:
img {
float: right;
}
On another note, why aren't you using heading tags to display your headings?
You could use the css display:table to make it apear using a table take a look at the docs for this found here
Place the image after the titles span end tag
<img src="Images/icon-1.png" />
<span class="content-title">My title 1</span>
<img src="Images/icon-1.png" />
<p>
Here is my text ...
</p>
<br />
if i properly understand your layout i would do this
<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
<img style="float:right; width:80px"/>
<div style="float:left; width:325px">
<span/>
<p>
...
</p>
</div>
</div>
you wont need the other positioning you used
if you cannot change the markup,
than put width to the span and p and float:left, and put float:right and width to img
putting float automatically converts the element to display:inline-block which mean that it no longer distributes to the free page width, but takes the minimal allowed space (set by width) and stays rectangular. This way it becomes something like a column.
I am trying to break the table crutch...
I want to place 3 "labels", "First", "Middle" and "Last" over 3 text boxes so that the labels are above the corresponding text boxes and the labels and text boxes are vertically aligned. In other words, I need a 3 columns table where the first row has 3 labels and the 2nd row has 3 text boxes in them and everything is left justified and I want ALL the columns widths to be identical and fixed.
How do I do this with w/o tables using only CSS?
I know that margin-left will give me a consistent distance between the groups, but how do I "carriage return" to the next line w.o using a Paragraph or a break tag, since the distance involved is really a function of the font, I imagine, instead of being able to "carriage return down" a specified number of pixels.
I know that display: block will put things on a new line, but that creates a break before and after. I just want a break "after."
I hope I explained it well enough.
Thanks.
Additional Edit:
I understand that perhaps I should not be avoid using tables for something that tables is good at, but if CSS had an attribute analagos to margin-left:10px but in a vertical direction AFTER performing a cariage return, the advantage of using CSS over tables is that I wouldn't have a million TR and TD tags in my markup.
Is there such a thing?
What you do is create your form fields this way:
<div id="form">
<div class="control">
<div class="label">
<label for="field1">Field 1</label>
</div>
<div class="field">
<input type="text" name="field1" id="field1">
</div>
</div>
...
</div>
with:
#form { overflow: hidden; } // this is important!
#form div.control { float: left; width: 33%; }
Now if one of those labels is larger the controls won't line up but this would be an example of where "pure" CSS falls shorts of what tables can do easily and naturally, which begs the question: why are you giving up on tables?
Note: Another answer along the same lines has suggested not wrapping the label and input in a div. This is a reasonable approach but you lose some expressive power. For instance, some things in CSS are only possible on block level elements. For example, you could change the above with:
#form, div.control { overflow: hidden; width: 600px } // this is important!
#form div.control { float: left; width: 200px; }
#form div.control div { float: left; width: 100px; }
and get your labels on the left, which you can't do quite as well without the wrapping inner divs.
HTML:
<div class="row">
<div class="column">
<label>Left</label>
<input name="left" />
</div>
<div class="column">
<label>Left</label>
<input name="left" />
</div>
<div class="column">
<label>Left</label>
<input name="left" />
</div>
</div>
CSS:
.row .column{
width: 200px;
float:left;
}
.row .column input,
.row .column label{
display:block;
}
You can now use CSS to style the textboxes and labels, so they look nice. Also notice how similar this example is to using tables, which goes to show that in some scenarios tables aren't evil, but the right way to go. If you want to align things in a grid, use tables.
Turns out that if you want to make a table of labels over input fields, the table element is fine to use.... If the table element is the clearest html code, why not use it?