|
CSS - Can Css Make The <br> Tag's Outcome Smaller?
Is there a command in CSS that can determine the height of a line break instead of the default which is way too big?
Similar Tutorialsi have a webpage that the layout looks perfectly fine when looking on a monitor larger than 1024x768. when i look at it on that screen size everything inside of a div that is absolutly positioned gets put over it as if it is smaller than it is on the larger screen size. has anyone else come across this problem and know how to resolve it. please ask for more info if needed. many thanks in advance. i have attached an image with the problem showing RESOLVED: i redid my javascript I want to create a line break in my text, but the <BR> command's is too big. Is there a way in CSS to dictate how large of a break I want? However, I only want to apply it to certain parts of a the page, but not the whole thing. How can I do this? Hi, I've a problem with a layout, I don't understand why div container appears smaller than input field contained. PHP Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css" > body { margin : 10px; background-color : gray; } .container{ background-color : orange; border : 3px solid black; padding : 40px; } </style> </head> <body > <div class="container"> <input name="prova" value="Look to the right -----> -----> -----> -----> -----> " type="text" style="width:2000px;"> </div> </body> </html> ps. Verified with Firefox 2.0.0.4 and mozilla 1.7.13 Any hint? I am not experienced in CSS or any web design for that matter. I am trying to make a very simple web site using CSS and I am being frustrated by some positioning problems. I would appreciate your help! Problem: When I restore the browser window to a smaller size, "things" in my web page start to overlap eachother. The smaller the window, the greater the overlap. What I have done: I have validated everything, guess and checked multiple positioning elements, fiddled with margins, and have browsed through multiple CSS sites looking for help. What I would like fixed: When the browser is in a smaller window, there will be a scrollbar that appears preserving the size of the web page instead of scrunching it all together. Graphical Representation: Full-Screen Smaller Window - Overlapping I Like This - Note the Scrollbar on the bottom Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Chapel</title> <style type="text/css"> @import "layout.css"; </style> </head> <body> <div id="chapell"> <img src="graphics\chapel1.jpg" alt="chapel"> </div> <div id="news"> <a href="news.html"> <img src="graphics\news.jpg" alt="news"> </a> </div> <div id="us"> <a href="index.html"> <img src="graphics\us.jpg" alt="us"> </a> </div> <div id="directions"> <a href="directions.html"> <img src="graphics\directions.jpg" alt="directions"> </a> </div> <div id="contact"> <a href="contact.html"> <img src="graphics\contact.jpg" alt="contact"> </a> </div> <div id="schedule"> <a href="schedule.html"> <img src="graphics\schedule.jpg" alt="schedule"> </a> </div> <div id="myspace"> <a href="http://www.myspace.com" target="_blank"> <img src="graphics\myspace.jpg" alt="myspace"> </a> </div> <div id="art"> <a href="art.html"> <img src="graphics\art.jpg" alt="artistry"> </a> </div> <div id="messages"> <a href="messages.html"> <img src="graphics\messages.jpg" alt="messages"> </a> </div> <div id="scoop"> <img src="graphics\scoop.jpg" alt="scoop"> </div> <div class="roundcont"> <div class="roundtop"> <img src="tl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br><br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="roundbottom"> <img src="bl.gif" alt="" width="15" height="15" class="corner" style="display: none" /> </div> </div> </body> </html> Code:
body {
color: white;
background-color: #FDF8DF
}
#chapell img {
position: absolute;
left: 21.5%;
top: 34%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#news img {
position: absolute;
left: 20%;
top: 38%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#us img {
position: absolute;
left: 20%;
top: 42%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#directions img {
position: absolute;
left: 20%;
top: 46%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#contact img {
position: absolute;
left: 20%;
top: 50%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#schedule img {
position: absolute;
left: 20%;
top: 54%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#myspace img {
position: absolute;
left: 20%;
top: 58%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#art img {
position: absolute;
left: 20%;
top: 62%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#messages img {
position: absolute;
left: 20%;
top: 66%;
border: none;
margin-bottom: 10%;
margin-right: 10%;
}
#whoarewe img {
position: absolute;
left: 37%;
top: 25%;
}
#scoop img {
position: absolute;
left: 36%;
top: 25%;
margin-bottom: 10%;
margin-right: 10%;
}
#findus img {
position: absolute;
left: 40%;
top: 25%;
}
#banter img {
position: absolute;
left: 32.5%;
top: 25%;
}
#docket img {
position: absolute;
left: 39%;
top: 25%;
}
#expressions img {
position: absolute;
left: 37%;
top: 25%;
}
#listen img {
position: absolute;
left: 39%;
top: 25%;
}
.roundcont {
top: 35%;
right: 35%;
width: 35%;
background: white;
color: black;
position: absolute;
margin-left: 10%;
margin-top: 0%;
}
.roundcont p {
margin: 0 3%;
font: 12px arial, tahoma, serif;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 3%;
height: 15px;
border: none;
display: block !important;
}
Thank you, Daniel I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top. Code:
body {background:#white;
}
#wrap {margin-left:20%;
margin-right:20%;
}
#header {border: 2px solid grey;
background:white;
}
#titlearea {
height:100px;
padding:4px;
font-family:Verdana;
}
#belowimg {background:#6a7c63;
margin:0px;
height:40px;
border-top:2px solid grey;
}
.link {float:left;
margin-top:8px;
margin-left:5px;
background:#6a7c63;
border-right:1px solid #681300;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
.linklast {float:left;
margin-top:8px;
margin-left:0px;
background:#6a7c63;
height:20px;
width:100px;
text-align:center;
text-decoration:none;
font-family:Lucida Grande;
padding-right:3px;
margin-bottom:8px
}
#main {border:1px solid grey;
background:tan;
padding:10px;
padding-right:0px;
margin-top:0px;
font-size:.80em;
font-family:Verdana;
color:#000000;
height:100%;
}
#rightcontent {float:right;
border-left:1px dashed grey;
padding-left:0px;
padding-right:0px;
height:90%;
width:230px;
font-size:small;
margin-left:8px;
background:white;
}
.button {
font-size:small;
font-family:Verdana;
border-top:1px solid grey;
padding:8px;
margin:0px;
padding-bottom:0px;
background:white;
}
.button.center {
padding-left:23px;
text-align:center;
}
.button.right {float:right;
border:1px solid red;
padding:2px;
background:blue;
}
#imagescroller{width:530px;
float:left;
margin-right:10px;
margin-left:10px;
height:300px;
padding:4px;
border-top:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
border-right:2px solid #f1e1b8;
border-bottom:2px solid #f1e1b8;
background:blue;
}
#bottom {background:blue;
border-bottom:2px solid red;
border-right:2px solid #f1e1b8;
border-left:2px solid #f1e1b8;
height:30px;
padding:0px;
color:grey;
margin-top:0px;
width:600px;
height:30px;
}
.box {
padding-top:0px;
margin:1px;
font-size:.80em;
font-style:strong;
float:left;
color:grey;
background:white;
font-family:Lucida Grande;
line-height:1px;
margin-top:196px;
}
.left {float:left;
padding-right:20px;
padding-bottom:0px;
margin-bottom:0px;
}
.right {float:right;
border-left:1px solid grey;
border-bottom:1px solid grey;
background:white;
}
.inside {border-top:1px solid white;
padding-left:3px;
padding-right:3px;
background:#ffa812;
font-family:Verdana;
font-size:.70em;
height:20px;
background:#EEC900;
color: #000000;
}
.bottom {height:10px;
background:#DEECFF;
border-top:1px solid grey;
}
.imagebottom {background:white;
border-bottom:2px double #f1e1b8;
padding:3px;
color:grey;
}
#blockquote {margin-left:18%;
font-size:.60em;
padding-left:40px;
color:brown;
font-family:Verdana;
font-style:italic;
background:white;
border-left:4px dotted orange;
}
#topping {border-bottom:1px solid grey;
margin-left:1px;
margin-top:4px;
}
#bottomborder {border-bottom:1px solid grey;
margin-left:1px;
}
#footer {border:1px solid grey;
height:30px;
margin-top:5px;
}
#test {height:20px;}
.test1 {margin-top:3px;
border-top:1px solid #fcfcfc;
height:0px;
}
.test2 {height:0px;
border-top:1px solid #f5f5f5;
}
.test3 {height:0px;
border-top:1px solid #ededed;
}
.test4 {height:0px;
border-top:1px solid #e5e5e5;
}
.test5 {height:0px;
border-top:1px solid #dedede;
}
.test6 {height:0px;
border-top:1px solid #d9d9d9;
}
.test7{height:0px;
border-top:1px solid #d3d3d3;
}
.test8 {height:0px;
border-top:1px solid #cfcfcf;
}
.test9 {height:0px;
border-top:1px solid #c9c9c9;
}
.test10{height:0px;
border-top:1px solid #c2c2c2;
}
#testy{height:20px;
color:000000;
}
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em;} /* 16px */
h6 {font-size: 1em; font-family:Verdana;color:brown;} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #c7a01e;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active {
/*background-color: #C74350;*/
color: #f09419;
text-decoration: underline;
text-shadow: 1px 1px 1px #333;
}
strong, b {font-weight: bold;}
060 em, i {font-style:
Thanks My Question is... When I put an image in a stylesheet, when does it get loaded? Does it get loaded when the style sheet gets loaded or does it get loaded only if I'm using the style on the page that has the image? The reason I ask... I have a lot of images in my style sheet, and I'm concerned about performance. Only some of the images in the style sheet are used on each page, but never all of them at once. I'm wondering if I should split up my style sheet into smaller style sheets, so that I will never be loading images for a page that I'm not going to be using on that page. (this would require the inclusion of 2 smaller style sheets on each page instead of 1 big style sheet). My style sheet is over 200 kb right now, and that does not include the image file sizes. Please advise. I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. Hi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it. (an expample is the HTML code that it would be) Code: <table width="150" border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr> <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr> <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr> </table> I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing! Cheers, Hi I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks Hi I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera. Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style type="text/css">
#test div {
border:solid 2px red;
position:absolute;
}
#head {
height:100px;
top:0;
left:0;
right:0;
}
#nav {
left:0;
top:105px;
bottom:105px;
width:200px;
}
#foot {
height:100px;
bottom:0;
left:0;
right:0;
}
.scroll {
top:0;
right:0;
left:0;
bottom:0;
margin-left:205px;
margin-top:105px;
margin-bottom:105px;
}
</style>
</head>
<body>
<div id="test">
<div id="head"></div>
<div id="nav"></div>
<div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
<div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated... SW. Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! Hi, I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page. I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others). Any ideas? W. <style type="text/css"> select{width:75px} option{width:150px} </style> I'm guessing the answer is no but I thought i would ask. In firefox that does exactly what it says it will. in ie all content is squashed in the options. I thought I've seen it work in IE but I dont recall where or how it was done. Hi guys I'm in little trouble, because I cannot get a little block (div) to be shown always at bottom, no matter the height of my left column I'm making a complete tableless css layout for the first time Look: Here's the skeleton code Code: <!-- Begin Left Column --> <div id="cssleftcolumn"> HERE I LOAD THE LEFT COLUMN MODULES (IT IS A CMS) <div id="imagedownmenu"><font color="white">this little block should go bottom!!</font></div> </div> <!-- End Left Column --> And here the css code Code:
#cssleftcolumn {
width: 218px;
float: left;
color: white;
}
#imagedownmenu {
background-image: url(../images/fondo_botleft.jpg);
background-position: bottom left;
background-repeat: no-repeat;
height: 76px;
vertical-align: bottom;
}
I cannot get the little image to aling at bottom, and well, I don't know if this code will be enough for you guys, so I'll be waiting for your help in case you need more info to accomplish this Thanks a lot in advance, Anyone knows how to make the standardized border as the attached file ? cheers. I need to create a 2 column layout as in the link below: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm However, I will not always know whether or not the contnet in the left or right will be longest. As it is in the design above they recommend to put the border on the left content if the left side is longer. But I will not always know which is longest, so I can't just change the border in the CSS. Is there anyway to create a layout like the above link that has a border separating the two columns that will resize to the longest column, no matter which side has longer content? Any help is much appreciated! |
|||||||