http://www.frostjedi.com/terra/dev/test.html
I'd like to have the colored boxes appear on the same line as "Test"
does. The div containing the colored boxes is defined as being inline,
yet doesn't seem to be acting as an inline element. I suspect the
floats in the images within the div may be contributing to the problem,
but I don't know what to do about it if that's the case. Any ideas? 10 3827
yawnmoth wrote: http://www.frostjedi.com/terra/dev/test.html
I'd like to have the colored boxes appear on the same line as "Test" does. The div containing the colored boxes is defined as being inline, yet doesn't seem to be acting as an inline element. I suspect the floats in the images within the div may be contributing to the problem,
Floating elements are block level elements.
Block level elements can't be contained by inline elements.
but I don't know what to do about it if that's the case. Any ideas?
In your code you have the word Test before the floats. I wonder what
your objective is: have the coloured boxes to the right, or to the
left of the text?
If to the left, you should place them before the text.
If you want them to follow the word text directly on the right side,
I'd put 'Text' in a div, and float it left, followed by the coloured
boxes, floated left as well.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els wrote: yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html
<snip> If you want them to follow the word text directly on the right side, I'd put 'Text' in a div, and float it left, followed by the coloured boxes, floated left as well.
That achieved the desired effect - thanks!
Although now vertical-align doesn't seem to be working. I'd like the
bottom of the "Test" text to have the same vertical position as the
bottom of the multicored div to the right. Any ideas?
yawnmoth wrote: Els wrote: yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html
<snip> If you want them to follow the word text directly on the right side, I'd put 'Text' in a div, and float it left, followed by the coloured boxes, floated left as well.
That achieved the desired effect - thanks!
Although now vertical-align doesn't seem to be working. I'd like the bottom of the "Test" text to have the same vertical position as the bottom of the multicored div to the right. Any ideas?
Not sure - I'm guessing setting vertical-align:bottom; for "Test" will
lower the text to the level of the blocks.
If the coloured boxes are just images: don't float anything, just go
Test <img src=".."><img src=".."><img.. .. ... >
This will make the images behave like text, hence remain on the same
level. Then set margins on the images to 0 to get them to stick
together.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Els wrote: yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html
I'd like to have the colored boxes appear on the same line as "Test" does. The div containing the colored boxes is defined as being inline, yet doesn't seem to be acting as an inline element. I suspect the floats in the images within the div may be contributing to the problem,
Floating elements are block level elements. Block level elements can't be contained by inline elements.
Is that stated in the CSS spec? As far as HTML is concerned, what can
and can't be included inside a particular element is determined entirely
by the element tag name, without regard to any CSS display value being
applied to the element.
Els wrote: yawnmoth wrote:
Els wrote: yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html <snip>
Not sure - I'm guessing setting vertical-align:bottom; for "Test" will lower the text to the level of the blocks.
That doesn't seem to work :(
Doing some reading on the subject suggests that vertical-align only
works on inline elements. Taking that into consideration, I tried
setting display to inline. I also created a span within the "Text" div
and added vertical-display to that. Neither worked...
If the coloured boxes are just images: don't float anything, just go Test <img src=".."><img src=".."><img.. .. ... > This will make the images behave like text, hence remain on the same level. Then set margins on the images to 0 to get them to stick together.
The above URL has had a "normal" div added that uses this method, and
it doesn't seem to work... any ideas as to why?
All that said, I appreciate your help thus far! :)
yawnmoth wrote: >http://www.frostjedi.com/terra/dev/test.html
That doesn't seem to work :(
There is no problem with any block inside inline in your example,
although display:inline; is superfluous.
The problems that you are encountering is that you have the div width
set to 30px which will only contain 3 of your images, resulting in three
lines of them.
In your newest version, change the div width to 90px for both sections.
The first section/method will be ok.
For the second section/method also remove the two clear:left; for the
first two groups of four images and apply a margin-top:5px; to the div
in order to move the single row of images down as desired.
The second section/method will also be ok.
--
Gus
Harlan Messinger wrote: Els wrote:
yawnmoth wrote:
http://www.frostjedi.com/terra/dev/test.html
I'd like to have the colored boxes appear on the same line as "Test" does. The div containing the colored boxes is defined as being inline, yet doesn't seem to be acting as an inline element. I suspect the floats in the images within the div may be contributing to the problem, Floating elements are block level elements. Block level elements can't be contained by inline elements.
Is that stated in the CSS spec? As far as HTML is concerned, what can and can't be included inside a particular element is determined entirely by the element tag name, without regard to any CSS display value being applied to the element.
The two statements are correct:
"Floating elements are block level elements."
"Block level elements can't be contained by inline elements."
The first statement is from the CSS specs.
The second statement is from the HTML specs.
The second sentence/statement has no relevence in this example since it
does not apply here.
It was clarified for me a several weeks ago in this newsgroup (was
actually like pulling teeth) that the display value does not change the
inherent block or inline state of an element. What it does do, is to
only change the way that it is displayed.
The first statement is therefore misleading and should really, read:
"Floating elements are 'displayed' as block level elements."
For example, an image is an inline element, but when floated it is
displayed as a block, however it will always remain an inline element.
Incorporating the second statement, consider four elements;
span and img which are inline elements, and
div and p which are block elements
You may have span and/or img, whether display:block is set or not,
within a div or p, whether display:inline is set or not.
You may _not_ have a div or p, whether display:inline is set or not,
within a span, whether display:block is set or not.
--
Gus
Gus Richter wrote: yawnmoth wrote:>>http://www.frostjedi.com/terra/dev/test.html
That doesn't seem to work :(
There is no problem with any block inside inline in your example, although display:inline; is superfluous.
The problems that you are encountering is that you have the div width set to 30px which will only contain 3 of your images, resulting in three lines of them.
In your newest version, change the div width to 90px for both sections. The first section/method will be ok. For the second section/method also remove the two clear:left; for the first two groups of four images and apply a margin-top:5px; to the div in order to move the single row of images down as desired. The second section/method will also be ok.
Correct me if I'm wrong, but wouln't those suggestions leave me with
one row as opposed to three? I'd like to be able to have the "Test"
text display on the bottom, while, at the same time, having three rows,
and the total width being 30px...
yawnmoth wrote: Gus Richter wrote:
yawnmoth wrote:
>>>http://www.frostjedi.com/terra/dev/test.html
That doesn't seem to work :( There is no problem with any block inside inline in your example, although display:inline; is superfluous.
The problems that you are encountering is that you have the div width set to 30px which will only contain 3 of your images, resulting in three lines of them.
In your newest version, change the div width to 90px for both sections. The first section/method will be ok. For the second section/method also remove the two clear:left; for the first two groups of four images and apply a margin-top:5px; to the div in order to move the single row of images down as desired. The second section/method will also be ok.
Correct me if I'm wrong, but wouln't those suggestions leave me with one row as opposed to three?
That is correct. That was what I thought you wanted. My
misunderstandin g. Sorry.
I'd like to be able to have the "Test" text display on the bottom, while, at the same time, having three rows, and the total width being 30px...
Subsequent boxes floated after the initially floated box will
automatically align to the top of the initially floated box.
So, for your example, apply negative margin to the div, next to the text
and containing the images.
Text-align and display won't help there.
--
Gus This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: nina |
last post by:
Hi all,
I've been working on a site that involves content in multiple
scrolling DIVs on a page which is loaded inside multiple framesets.
the layout is cramped as all hell but I'm not going to argue that with
the client -- they def. want it to be structured this way.
One DIV usually contains two "comparable" items between which the user
can switch. I solved this by putting inline links at the top of the
DIVs that link to an <A...
|
by: Adam Siler |
last post by:
i want to display a series of inline, fixed-width DIVs that will wrap into
columns - a table, basically. i can do it under Internet Explorer, but the
same code under Netscape or Opera does not behave as expected. the DIVs
"collapse" into small rectangles (i put a border around them so i could
see), but their contents (some middle-aligned text) span the width of the
page. if not for the borders that i added, it would appear that each DIV was...
|
by: Aaron |
last post by:
Hi,
I'm trying to use style sheets instead of tables for layout, but I'm not
sure on how to do something...
I have a div (100% width) containing 3 other divs. Each needs to be lined
up next to one another inside the first div. Whenever I nest these divs
inside the first, it always treats each of them like a block element and
puts them on the next line down. If I try to define 'block: inline' for
each of them, the ones without images...
|
by: txican |
last post by:
the HTML is:
----------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>foo</title>
<style type="text/css">
<!--
..b {
|
by: massic80 |
last post by:
Hi everybody!
I'm making a page for an exam at uni.
In two DIV blocks of it there should appear (and disappear) some
"icons", due to XML messages, so I dunno how many of them should I can
obtain; I want to show a small image, with its "icon name" under it, so
I thought to use a DIV where I put a small image, a <br/and the icon
name (and text-align:center as CSS). My page is fully liquid, so my DIVS
may be resized, and I wanted them to be...
| |
by: Steve Richter |
last post by:
I would like to use display:inline and other CSS attributes to build
an entry form. Where the heading to the left of the text box is always
a set width.
It is not working so I am experimenting with two divs to get them to
render side by side:
<div style="width:12em;border: 2px solid #EFCE8C; padding:
0.5em;display:inline;">abc</div>
<div style="width:12em;border: 2px solid #EFCE8C; padding:
|
by: Liam Gibbs |
last post by:
Hello everyone,
I'm trying to program a church web site and I'm having a number of
problems with the layout.
The html is at http://www.altmarvel.net/Liam/index.html and the css is
at http://www.altmarvel.net/Liam/OCOC.css.
Anyway, the problems are these:
1. The Search stuff underneath the menu and to the right should be
|
by: Liam Gibbs |
last post by:
Hello everyone,
This will be my third time posting this, but for some reason, my
message isn't get through to the newsgroup, even after hours of
waiting. So here goes again.
I'm having huge problems with a site I'm creating for a church. I'm
trying to use DIVs and SPANs for the layout, not a table, but I'm
honestly thinking of just going with the table since it's MUUUCCCCHHH
less of a headache. My page can be found at...
|
by: Niheel |
last post by:
To speed up developing i am using a lot of inline code vs stylesheets.
Mainly using the style= attribute in divs, spans, and p.
Is this the best way to do 3 column inline? or is there an easier way. I nested the divs.
<!-- container -->
<div style="width: 800px; border: 1px solid #ccc;">
<div style="background-color:#009999; float: left; width:550px;">
column 1
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |