I have some divs near each other in one block and I want them to stay in the same block(line) on getting the screen bigger(CTRL +), here's my code (http://fiddle.jshell.net/YDyfy/),
CSS:
#menu{
width:100%;
height:40px;
margin:auto;
padding:0 0 12;
background:url(file:///C:/Users/Windows7/Desktop/imgbg.jpg) repeat 0 0 #f8f8f8;
border:1 solid;
border-width:0 1 1;
box-shadow:0px 1px 10px #000;
text-align:center;
position:fixed;
top:0;
left:0;
right:0;
}
.menutext{
font-family:Helvetica neue,Helvetica,Arial,Verdana,Sans-serif;
font-size:16;
display:inline-block;
border:solid;
border-color:#aaa #ccc;
border-width:0 0 5 6;
padding:6 40 7 40;
margin:7 15;
box-shadow:-1px 2px 5px #404040;
}
HTML:
<div id="menu">
<div class="menutext" linkId="div1">Description</div>
<div class="menutext" linkId="div2">Shipping and payments</div>
<div class="menutext" linkId="div3">Seller information</div>
<div class="menutext" linkId="div4">Feedback</div>
</div>
Simply, I want when the screen get bigger divs stays in the same line/block
Use white-space:nowrap on the container (updated Fiddle).
Your question is very unclear, so don't shoot me if this isn't what you are looking for.
As a general sidenote, you should never nest block level elements such as <div> inside inline elements such as <a>. If anything those should be <span> elements.
I'm a little confused. You want them to appear all on the same line? Or on separate lines?
If you want them all on one line when the window increases, then I see no problem with the fiddle you provided.
If you want them all on separate lines, change the display attribute to block in your CSS.
You miss some px in padding, margin and font, I think due to this you got the issue.
Use font size in percentage or EM.
Related
i have a div tag like this :
<div id="test">
<p>Some text here</p>
</div>
i want to make border-bottom of 'test' lunate! any one can help?
it is something like this :
The answer you got from susheel is accurate, but if you want a more elliptical border, you need to set different parameters.
Set you border style to:
border-radius: 15em/5em;
border-top-left-radius: 0;
border-top-right-radius: 0;
You can play with the parameters to get a different curve or even change the em to px (but I myself thik it's better this way).
fiddle:
http://jsfiddle.net/F649s/
#test{
width:150px;
height:150px;
border:1px solid silver;
border-radius: 0 0 50% 50%
}
First of all thanks in advance, since this page has helped me a lot with my progress in learning HTML.
I am trying to learn it, so I can build my own site, where I will be able to write.
And this is the problem:
I want to insert text into each of the Divs, that fits in nicely with an even margin on all inner sides. And I don't want it to exceed the given parameters. When I try it always moves outside of the Divs.
I would much appreciate it, if there is someone out there to help.
index.html
<div id="content">
<div id="top_news">
<div id="top_news1"></div>
<div id="top_news2"></div>
</div>
<div id="top2_news"></div>
<div id="top3_news">
<div id="top3_news1">
<div id="top3_news1_1"></div>
<div id="top3_news1_2"></div>
</div>
<div id="top3_news2"></div>
<div id="top3_news3"></div>
</div>
</div>
stylesheet.css
#container {
width : 930px;
margin : auto;
background-color : #ffffff;
}
#content {
margin-top : 7px;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 7px;
border : 1px solid #d3d3d3;
width : 908px;
}
#top_news {width:908px; height:250px;}
#top_news1 {width:453px; border-right:1px solid #d3d3d3; height:250px; float:left;}
#top_news1:hover {background-color:#fdb38d;}
#top_news2 {width:454px; height:250px; float:right;}
#top_news2:hover {background-color:#faf5a2;}
#top2_news {width:908px; height:225px; border-top:1px solid #d3d3d3;}
#top2_news:hover {background-color:#70addc;}
#top3_news {width:908px; height:250px; border-top:1px solid #d3d3d3;}
#top3_news1 {width:302px; height:250px; border-right:1px solid #d3d3d3; float:left;}
#top3_news1_1 {width:302px; height:125px;border-bottom:1px solid #d3d3d3;}
#top3_news1_1:hover {background-color:#d5addd;}
#top3_news1_2 {width:302px; height:124px}
#top3_news1_2:hover {background-color:#f0f0f0;}
#top3_news2 {width:302px; height:250px; border-right:1px solid #d3d3d3; float:left;}
#top3_news2:hover {background-color:#b7e795;}
#top3_news3 {width:302px; height:250px; float:left;}
#top3_news3:hover {background-color:#ff6686;}
I have come across another issue and since support was so quick and helpful, I wanted to ask it here.
I noticed, that when I zoom out, that the Divs move and don't stay where I originally planed them. Has anyone got a solution?
Thanks in advance
Append your text within a p tag with padding (extend the default padding) to the divs. To keep the box sizes add overflow:hidden to the divs or make them scrollable with overflow:scroll.
DEMO
I hope this is what you are trying to do :)
I have a parent div, Inside that div I have two levels of children div as follow,
<div class="grandParant">
<div class="parant1">test</div>
<div class="parant2">
<div class="child">Hello world this is a long test string</div>
<div class="child">12</div>
<div class="child">4545</div>
</div>
</div>
from the above sample code, I need to show the entire first "child" class content(Hello world this is a long test string) without any break, ie in a single line. The width of the "parant2" div should also be incremented with respect to the child width. So how could this be done with css? I am not posting my css since it is a little bit lengthy, but you can see it in jsfiddle.
EDIT
my expected output is more like the alphabet 'L'
| test |
| Hello world this is a long test string |
| 12 |
| 4545 |
my jsfiddle
If you remove the max-width take parant1 outside of it's grandparent, you'll get your desired result of non-wrapping:
DEMO: http://jsfiddle.net/9Sha7/18/
You can do that by removing "max-width" ...
Where ever if you give "max-width" it only get upto that extent only,beyond that width it will break the lines
Put css only like
min-width:100px;
Here is fiddel http://jsfiddle.net/9Sha7/8/
take out the padding
.grandParant{
margin:0 auto;
float:left;
min-width:100px;
max-width:120px;
height:150px;
position:relative;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:#cccccc;
font-size:11px;
cursor:pointer;
}
.parant1{
width:auto;
margin-bottom:22px;
text-align:center;
background:blue;
}
.parant2{
text-align:left;
width:auto;
background:#f3f3f3;
}
.child{
width:100%;
position:static;
background:green;
}
}
Just get rid of all the width attributes and the max-width, then it should be fine according to your requirements: http://jsfiddle.net/9Sha7/13/
Remove max-width from your .grandParent class and give white-space:nowrap; to your .child class.
Working Fiddle
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
i'm getting this weird CSS bug in ie6/7 (but not in ie8 or firefox): for some reason, my anchor and <span>, two inline elements, which are on the same line, are being displayed on different lines. the span is floating to the right, too!
Here's the HTML:
<div class="sidebartextbg"><a href="journey.php" style="width:50%"
title="Track past, present and future milestones during your employment">Journey</a>
<span class="notificationNumber">2</span>
<!-- JOURNEY COUNT: end -->
</div>
and here's the CSS:
.sidebartextbg {
background:url("../images/sidebartextbg.gif") repeat-x scroll 0 0 transparent;
border-bottom:1px solid #A3A88B;
font-size:14px;
line-height:18px;
margin:0 auto;
padding:5px 9px;
width:270px;
}
.notificationNumber {
background:url("../images/oval_edges.gif") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
float:right;
padding:0 7px;
position:relative;
text-align:center;
width:17px;
}
so: why would the floated span be displayed on the line under the anchor? Thanks!
Just apply a left float to your anchor tag, that should fix the problem.
.sidebartextbg a {float:left;}
sometimes it helps to setup zoom: 1; or position: relative; to fix some ie loolz.
Don't know the answer to your actual question, but an easy fix would be to float your anchor left or switch the anchor and span tags in your code. (span, then anchor) IE
<div class="sidebartextbg">
<span class="notificationNumber">2</span>
Journey
</div>