I have div, which position is set to absolute. Also I have couple paragraphs inside of it. When I move right side of explorer to the left, the paragraphs move with it and try to adjust to size of window. I tried to position them absolutely, but them still move. How can I set that div or paragraphs inside it, so they remain on the same spot? Please... Here is the code:
HTML:
<div id="search_slogan" > <!-- search_slogan Slogan-->
<p style="font-size: 26px; "> Free Business Name Search </p>
<p style="font-family:gothic; "> Enter any potential business name.
We'll let you know if the company name is available for use in your state, </p>
<p style="font-family:gothic; "> usually within 1 business day. </p>
</div> <!-- END search_slogan Slogan-->
CSS:
#search_slogan{
line-height: 15%;
position: absolute;
top: 150px;
left: 200px;
font-family:basic_gothic;
font-size: 18px;
}
Your problem might be that your box has no set width, so it fills the space remaining.
Add a set width like below and it won't move anymore.
#search_slogan{
line-height: 15%;
position: absolute;
top: 150px;
left: 200px;
width: 400px;
font-family:basic_gothic;
font-size: 18px;
}
There are additional solutions with things like hiding the overflow, but setting the width is the simplest.
The problem was your line:height property, that was set to 15%. That will cause letters to pile up. I cleanen up your HTML and created a JSFIDDLE HERE.
Related
I have a very simple subwindow that displays help text. I am giving it the data in a variable but the window expands horizontally instead of wrapping. So if the text is bigger than 20 characters or so, the window resizes. I do not want the window to resize, I want the text to break and fill in the box. In the style sheet, I have made it fixed at 150/150 but it seems to ignore that when running.
This is the HTML
<div style= "position: fixed; Top: 50px; right: 0px;" >
<div class="legend-container">
<div class="title">Legend</div>
<div #graphOverviewComponentRef id="legend-overview-component"></div>
<p style="font-size:11px; word-break: break-all; white-space: normal;">{{queryInfo}}</p>
</div>
</div>
The variable (queryinfo) contains an explanation for the query and they are usually 100 characters or more. So if its displayed on one line, its much wider than the window. I want the text to wrap and fill the box vertically. This is my css
#legend-overview-component {
width: 150px;
height: 150px;
background-color: white;
border-radius: 0 0 4px 4px;
Right now, the window is expanding horizontally even though I have fixed positioned it. So I end up with a single line running end to end on a screen.
Thoughts ?
Do you just need to put the <p> tag inside the div in question?
<div style= "position: fixed; Top: 50px; right: 0px;" >
<div class="legend-container">
<div class="title">Legend</div>
<div #graphOverviewComponentRef id="legend-overview-component">
<p style="font-size:11px; word-break: break-all; white-space: normal;">{{queryInfo}}</p>
</div>
</div>
</div>
I need a hint on how to properly place inserted element:
The initial situation is that the target page lists items in a grid of square tiles, where tiles reflow as the viewport width changes.
What I need is to transform the grid layout to something like tile layout providing more space for more details of each item (one item per line), where the original tile is aligned left and my rectangle element fills the remaining space of the viewport.
The tile is DIV wrapped inside enclosing DIV. Now I create a new SPAN and insert it after the inner DIV. However, the SPAN is placed not beside but below the inner DIV and it's width seems to be fixed to an unknown value. I've workaround it by adding position: relative to outer DIV and position: absolute to inner SPAN and setting it fixed width. It works eventually but as I notice the outer DIV doesn't expand if my SPAN overgrows it's area (it overflows) - ie. my SPAN seems to be excluded from the outer DIV though it's hierarchically inside it.
The question is how to organically insert the SPAN so that it's adopted by the ancestor, which then grows/shrinks as my element grows, and also inherit it's style.
<div style="position: relative;">
<div style="width:200px;">
..the original tile
</div>
<span style="position: absolute; left: 210px; top: 0px; margin-right: 10px; width: 500px;">
...here comes my content
</span>
</div>
Try the above code.. plz add the float concepts for this..
<div style="width: 500px; height: 150px; background-color: black;">
<div style="width: 150px; height: 150px; background-color: blue; float: left;"></div>
<div style="width: 350px; height: 150px; background-color: red; float: right;"></div>
</div>
I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.
Instead of pasting code I can show my work in progress page at:
http://www.footy-results.co.uk/
The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!
Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!
I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...
You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:
HTML:
<div class="infoPanel">
<span class="infoPanelVertical">
<div class="spanwrapper">
<span class="infoNumberVertical">148 TEAMS</span>
</div> your text here...
</span>
</div>
CSS:
.spanwrapper {
float: left;
height: 157px;
position: relative;
width: 48px;
}
.infoNumberVertical {
background-color: #F5F5F5;
border: 1px dotted #DDDDDD;
color: #1A3C7B;
float: left;
font-size: 32px;
font-weight: bold;
margin-left: -56px;
margin-top: 60px;
transform: rotate(-90deg);
width: 150px;
}
The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle.
I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.
I'm trying to get a layout in HTML/CSS done. The goal is about this:
Some elements in this layout have a non-fixed size. The area on the left has fixed width, the footer has fixed (content matching) height. The list on the left shall be extending it's height, the text in the footer it's width and the canvas both dimensions so the entire browser page is filled, but without causing any scrollbars to appear. Oh, and B is for button, but that's not really of importance I guess.
I have seen some examples (this) and references (this) and tried to learn from them, but I can't get it the way I want. One of the closer attempts I have made is this one:
<html><body style="margin: 0; padding: 0;">
<div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; right: 0px;">
<div style="position: absolute; background: #afa; top: 0px; bottom: 0px; left: 0; width: 240px;">
<input style="width: 240px" id="selectedPosition"></input>
<select style="position: relative; width: 240px; height: 100%;" id="points" multiple="multiple"></select>
<div style="position: relative; background: #afa; left: 0; width: 240px;">
<input style="width: 80px" type="button" value="Add"></input><!--
--><input style="width: 80px" type="button" value="Up"></input><!--
--><input style="width: 80px" type="button" value="Down"></input>
</div>
</div>
<div>
<div><input style="position: absolute; bottom: 0px; left: 0px; width: 100%"></input></div>
<div><input style="position: absolute; bottom: 0px; right: 0px;" type="button" value="Button 4"></input></div>
</div>
<div style="position: absolute; background: #aaf; height: 100%; left: 240px;top: 0px;right: 0px; overflow: auto;"></div>
</div>
</body></html>
Problem here is the lower elements ant the button in the bottom right are covered by size extending elements. I probably could fix this with fixed dimensions or margins, but I'd like to have it done in a "proper" way.
Another approach was to use a 4x5 table with spanning rows and columns, but I got confused even more and quickly let that drop.
I'm fairly new to layouting in HTML/CSS, so any source "for dummies" in this matter helping me getting the job done in spite of an actual solution is appreciated also.
Update
After looking at the links and at Fico's answer. However, the closest attempt is this. Problem is that both the list and the bottom text overlap the respective button(s) when width/height is set to 100% (in the jsfiddle example I used lower numbers for demonstration purposes). As a side note, the list in the example given does not extend vertically at all. When using my local file, then it does.
All examples I have seen with a fixed footer and height filling columns use some fixed size height for the footer which is then negatively applied as margin, but my footer should just wrap it's content. Isn't there any way to set up a rule "extend until you reach the next element"?
Start by using markup for content and css for styling.
You will work cleaner and with less trouble.
It's not a good practice to include so many tags instead of using an external CSS (or eventually embedded in the HEAD of the document)
It doesn't seem to me, you are in the need of so much absolute positioning here.
Identify your big areas in your design (as the figure below)
First impression is that you got an aside column at the left width some elements in Normal document flow and in its bottom three buttons floating in a div
The canvas could be floating left or right of this aside
Both , the aside and the canvas , contained in a mainContainer div.
The text and button at the bottom could be integrated in a footer with the button floating right or left at your will
The flexible solution is simple to instrument. Use some min with properties for your canvas and probably some fixed widths for the aside.
I'm making a website and want it to appear as a grid of boxes and rectangles.
I have a 6x6 grid of relatively-alined left-float divs. They work fine and fit neatly in a 900 width wrapper div. If i want a horizontal rectangle, i simply make one of these squares twice as wide (accounting for margins between, but that's irrelevant) and delete the one next to it. No problem.
The issue I have comes in when I want to make a rectangle twice as TALL. it ends up bumping everything left of it in the same row as it a line down. The same happens with a square twice as large (2x2 grid units).
Here's the code in jsfiddle:
http://jsfiddle.net/zucw9/
Essentially, how can I get either 8,9, and 10 to shift up one space, or for 6,7, and 8 to move into that gap, leaving 9 and 10 where 6 and 7 are right now?
http://jsfiddle.net/zucw9/10/
This solution isn't a very good solution but it works.
(I changed some of the names so i could read it better. (.grid_rect_tall became .grid_tall etc. margin-left:10px; margin-right: 0px etc.. became margin: 5px;)
basically you specify a -ve margin-bottom for the tall one and an extra margin so the other elements don't overlap.
.grid_square, .grid_long, .grid_tall
{
float: left;
margin: 5px;
background: #6CC;
}
#main{
position: relative;
width: 905px;
overflow: hidden;
border: 1px solid black;
padding: 5px;
}
.grid_square{
width: 140px;
height: 140px;
}
.grid_long{
width: 290px;
height: 140px;
}
.grid_tall{
width: 140px;
height: 290px;
margin-bottom: -150px;
}
.rbuffer
{
margin-right: 155px;
}
.lbuffer
{
margin-left: 155px;
}
I'd still go with my comment though and use either: http://960.gs or css3 grid layout: http://w3.org/TR/css3-grid-layout
EDIT:- I thought i better put a why to my comment earlier that this is not a good solution. Simply put: if you want to change the layout of the page you will have to change the classes on the items as well as having to change the css.
Also created one with even more elements to show the possibilities: http://jsfiddle.net/zucw9/11/ (or in em instead of px because i was bored. http://jsfiddle.net/zucw9/15/)
The layout is standard, how it should be displayed. I would recommend to use another div which wraps up the dives that appear before the taller div. This is not a very flexible solution though.
Edit: Move
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
higher in hierarchy after
<div class="grid_square">2</div>
should fix it.
i hope your thinking like below
code:
<div id="main">
<div class="grid_square">1</div>
<div class="grid_rect_long">2</div>
<div class="grid_rect_tall">3</div>
<div class="grid_square">4</div>
<div class="grid_square">5</div>
<div style="clear:both"></div>
<div>
<div class="grid_square">6</div>
<div class="grid_square">7</div>
<div class="grid_square">8</div>
<div class="grid_square">9</div>
<div class="grid_square">10</div>
</div>
</div>