Sure this is a simple solution to this, but I am scratching my head trying to solve it. I have a tabbed container with about 3 list items, each of which have hyperlinks in them. When I reduce the size of my browser window [let's say from the right] it does not hide the element to the extreme right, instead the size of the list item reduces and then adjusts itself right below the width of the other two list items.
I have the min width set to the same as that of the width of the element.
Where do I need to tweak ?
Here is the semantic structure
<div id = "tabbed">
<ul>
<li>Tab 1</li> <!-- 3 list items -->
</ul>
<div class = "tabs" id = "tab_1"> <!--3 tabs, each tab corresponds to the link in the list item -->
</div>
</div>
Here is the CSS:
#tabbed
{
width :80%;
margin:auto;
margin-top:20px;
}
#tabbed ul{
margin:0px;
margin-top:15px;
}
#tabbed li
{
display: inline-block;
list-style-type:none;
border:1px solid #ccc;
border-bottom: 0px;
border-top-left-radius:4px;
border-top-right-radius:4px;
margin-right:5px;
margin-top:5px;
padding:4px 4px 10px 4px;
width: 30%;
background:#87CEEB;
}
#tabbed a{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #7F818B;
display:block;
text-align:center;
text-decoration:none;
margin-top:5px;
margin-bottom:5px;
}
Yes, please give us some example html and CSS/styles for what you are doing. The way a browser will wrap content depends very much on the implementation. I assume you are using the CSS display: inline to make the list horizontal?
Without any code to look at, I can suggest the following:
try
your_div {overflow:hidden;}
For starters,
Secondly, min-width is only observed by only half the browsers out there. I would suggest trying a different approach for setting minimum width, as well as a code example for best results:)
Related
So I can't seem to identify what I'm doing wrong. I created a menu with 4 buttons, namely: Update, Register, Records and Sign out. I placed them together in a class and styled them with CSS. They turned out to be of different lengths, I've tried everything I currently know and understand about CSS and I'm stuck.
Here's the CSS code:
.button2 {
padding:15px 150px;
margin:0px auto;
border-radius:5px;
color:#221e1f;
font-family:corbel;
font-size:20px;
text-decoration: none;
border: 1px solid #d13129;
background: #d13129;
width:300px; /* set a width, can be fixed or percentage */
display:block; /* by default <a> tags arn't block elements and need to be for setting a width */
}
picture with the new edit:
http://gyazo.com/7c7203de14e01873b59e60392fa76207
You should define Height and Width in the css as well. Something like:
height:5px;
width:15px;
Set a width in the CSS (e.g. 'width: 50px;'). Unless you do this the size will match however large the text within the button is (plus the padding/borders).
Right now my code for my screen looks perfect, but for some reason everytime I change to browser size from full screen to a smaller window all my nav bar moves underneath eachother under the header div and other things as well. If I was to add things in the footer as well how can I set it up so that the page stays the same no matter how you resize it. I don't mind if its fixed on only a full screen mode.
Another issue is that when I asked a friend to check the websites on his laptop it was all messed up because of screen resolution I think, but when I saw it on my monitor it looked completely fine. So I am confused and have no idea how to fix this issue. I have researched as much as I can, but everything I tried didn't work.
So all I am trying to do is make sure that the website is fixed and is only viewable in full screen. If I resize it to smaller then you can't see parts of the page and that's all.
If you could please help me that would be great!
http://jsfiddle.net/thNRs/ ---------------->JSFIDDLE DEMO. You can see the problem right away using this.
HTML CODE:
<body>
<div id="page">
<div id="header">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
About
Reports
Documents
Checklists
License Tools
Presentations
Software Releases
</div>
</div>
<div id="main"></div>
<div id="footer">
<!--<h4>WNG Product Development Engineering (US)</h4>
Circuit
Contact Us-->
</div>
</div>
</body>
CSS CODE:
html, body
{
padding:0;
margin:0;
height:100%;
}
#page
{
min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img
{
float:left;
display:inline;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active
{
color: #FFFFFF;
text-decoration: none;
}
/*#footer h4
{
left:20px;
top:-10px;
position:relative;
text-align:left;
font-weight:bold;
font-family: Sans-serif;
float:left;
color:#fff;
margin-left:20px;
}
#footer a, a:visited, a:hover, a:active
{
color::#fff;
text-decoration:none;
position:relative;
left:1025px;
top:10px;
text-align:left;
font-weight:bold;
font-family:Sans-serif;
float:left;
margin-left:20px;
}*/
/* NAVIGATION BAR CODE */
#navigation
{
position:absolute;
top:60;
left:500;
right:0;
bottom:0;
width:60%;
height:24px;
background-color:#115EA2;
min-width:100px;
text-align:center;
padding:10px 20px;
}
#navigation a
{
font-size:20px;
font-weight:bold;
font-style:Sans-serif;
margin:10px 0;
height:18px;
padding:12px 10px;
color:#FFF;
text-decoration:none;
}
#navigation a:hover
{
background-color:#333;
}
A good solution to problems with the page shifting when the window resizes or when someone does a ctrl + mouse wheel up/down type of page zoom is to set sizes of things on the page using the em unit. For example:
height:12.5em;
not...
height:200px;
width:60%;
etc...
1em == 16px by default. If you change the font size to a new em I think it can mess things up so as long as you're not doing that you're fine.
Set all containers except for the outermost containers to a definite size and use em units as they are calculated based on the font size or something so when you zoom the page everything stays the same relative size and you don't get messes. When I say outermost container I am referring to the ones directly inside the main tags, body, header, etc... set those with:
margin:auto;
width:(desired)%;
because they are on the outside, they only change in reference to the edge of the display area so when you zoom in and out, the outer edge buffer of the page just collapses and the things in the center appear to shrink and enlarge from the center.
So get a calculator, and start converting things like width:1300px; to width:81.25em.
One last note. em units round to 3 decimal places. ie. 2px = .125em exactly but 1px =/= .0625em you would use .063em.
Something to this effect?
The biggest issue was that you didn't have a minimum width for your menu, so it would keep shrinking until it stacked on itself.
#navigation {
float:left;
width:60%;
height:24px;
min-width:1000px;
text-align:center;
padding:10px 20px;
}
Add fix width to the #navigation. It has percent value now, so its width will counted from the body's width (60%).
If the #navigation's width narrower than the elements' width sum, the elements will start to fall to the second row.
The #header's width is "97.5".
Without measurement type (px, percent or some else) it will be ignored by the browsers (it will be 100%).
I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: http://jsfiddle.net/gtspk/
HTML
<span class="line">
<h2>Latest Track</h2>
</span>
CSS
.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}
The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?
UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/
Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)
http://jsfiddle.net/gtspk/9/
<span class="line">
<h2><span>Latest Track</span></h2>
</span>
.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}
Right, sorry, misunderstood what you meant by padding. Fixed.
I have a series of divs which contain a small paragraph of text. I would like to make all the divs of the same height and vary the width as required to fit the paragraph.
If I was to do this in the vertical direction I would just set the width of the div. But if I set the height the paragraph turns into one line making the box as wide as possible.
How to I force the paragraph to have as many lines as the height will allow then increase in width as required
I have tried using min-height:100px for the paragraphs but the left over height is filled with white space and the text is still on one line.
Here is an example off what I am trying to do. As you can see the text is staying on one line. I would like to make it file the box vertically before making the box wider.
jsfiddle link: http://jsfiddle.net/Kj49B/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="container">
<li class="item">
Title 1
<br/>
<p>A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul</p>
</li>
<li class="item">
A long title
<br/>
<p>Watch the latest news summary from BBC World News. International news updated 24 hours a day</p>
</li>
<li class="item">
A much much longer title
<br/>
<p><img src="http://www.montrealgazette.com/6355281.bin" align="left"/>Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff</p>
</li>
<li class="item">
A long title that goes on and on until it is very very long
<br/>
<p>Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country</p>
</li>
</ul>
</body>
</html>
Here is the CSS that goes with it:
body
{
font-family:sans-serif;
}
.container
{
width:95%;
margin-left:auto;
margin-right:auto;
align:center;
}
.item
{
margin-left:auto;
margin-right:auto;
display:inline-block;
color:#000033;
font-size:14px;
height:180px;
line-style:none;
float:left;
margin:20px;
padding:20px;
vertical-align:middle;
border:1px solid #000033;
border-radius: 50px; /*w3c border radius*/
-webkit-border-radius: 50px; /* webkit border radius */
-moz-border-radius: 50px; /* mozilla border radius */
}
.title
{
color:#000033;
text-decoration:none;
font-size:22px;
margin:0px;
padding:0px
line-height:1;
}
img
{
height:90px;
margin: 5px;
}
p
{
display:block;
margin:5px;
width:minimum;
padding:0px;
min-height:80px;
line-height:1.2;
word-wrap:true;
}
You can't using CSS. There is nothing I've ever come across even in CSS3 that supports this natively. What you're asking for is that width:auto act like height:auto but it won't because auto height is based on the concept of line boxes and there is no such thing as a "column box" (because text isn't a grid).
Tables with fixed height cells are the closest you'll get but you say in the comment above they don't suit you for other reasons. Even then you'll find the behaviour isn't particularly consistent or easy to control.
You can do this using javascript by detecting boxes that exceed a certain height then progressively making them wider until they don't. If javascript isn't an option either then I believe you are out of options.
Hi you just have to give the width & height auto in your css that will work fine according to your requirement.
see your updated css :-
body
{
font-family:sans-serif;
}
.container
{
width:auto;
margin-left:auto;
margin-right:auto;
align:center;
}
.item
{
margin-left:auto;
margin-right:auto;
display:inline-block;
color:#000033;
font-size:14px;
line-style:none;
float:left;
margin:20px;
padding:20px;
height:auto;
vertical-align:middle;
border:1px solid #000033;
border-radius: 50px; /*w3c border radius*/
-webkit-border-radius: 50px; /* webkit border radius */
-moz-border-radius: 50px; /* mozilla border radius */
}
.title
{
color:#000033;
text-decoration:none;
font-size:22px;
margin:0px;
padding:0px
line-height:1;
}
img
{
height:90px;
margin: 5px;
}
p
{
display:block;
margin:5px;
width:minimum;
padding:0px;
line-height:1.2;
word-wrap:true;
height:auto;
}
OR See the fiddle:- http://jsfiddle.net/Kj49B/7/
You should have this:
div {max-height:100px;}
p {height:100%;}
Leave the width unspecified. Of course, you could easily replace div and p with ids or classes if you wanted to.
My answer may not be valid since I saw your code sample after I posted this answer. I'll leave this up here in case it may be of some help.
I'm doing a menu for a restaurant that they dynamiclly add. it looks like this
Dish Name Price
Content in the dish,Content in the dish,Content in the dish,
Content in the dish,Content in the dish.
What i want to do is to get the blank space dotted, with . or dotted border.
But i cannot figure out how to get the css to autoadjust the width of the blank space div.
The dishnames could be longer then "dishname".
Any1 have a solution for this?
EDIT
The price and name is in 2 divs already with floats on them
.dishHead
{
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice
{
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
Edit2:
The whole thing is structured as below:
a div that floats right or left
the left floating head, the right floating price, and a description below.
I need a div between the head and price without affecting the whole div it lies in
I think I would do it with a background image on the whole of the "heading" part then use a background color on the name and price div to cover the image however that will only work if the background is a plain colour.
In answer to your question to get a third div to take up the remaining space between the left and right divs you would use overflow:hidden on it so an example using a dotted border might look like this:
Example Fiddle
CSS:
.dishHead {
font-family:Verdana;
font-size: 18px;
color:#262626;
float:left;
font-weight:200;
}
.dishPrice {
font-family:Verdana;
font-size: 14px;
color:#262626;
float:right;
}
.spacer {
overflow: hidden;
border-bottom: 3px dotted #000;
}
HTML:
<div class="dishHead">Dish Name</div>
<div class="dishPrice">Price</div>
<div class="spacer"> </div>
<div class="dishContent">
Content in the dish,Content in the dish, Content in the dish,
Content in the dish,Content in the dish.
</div>
You could place lots of dots in an element with dishname and use the fallowing css:
.dishname {
width:400px;
overflow:hidden;
white-space:nowrap;
}