|
CSS - Scalable Box With Custom Header
I'm creating a box that should be able to be scaled by either setting the size of the element containing the box, or the box itself.
Here is the HTML: html4strict Code: Original - html4strict Code <div id="container1"> <div id="panelBox1" class="panelbox"> <div class="header">My Panel Box</div> <div class="content"> <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box</div> </div> </div>
The CSS: css Code: Original - css Code div.panelbox { background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top; padding: 0px; margin: 0px; } div.panelbox div.header { background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top; line-height: 24px; margin-left: 3px; font-size: 0.8em; font-weight: bold; padding: 0px; } div.panelbox div.content { border: solid 1px #b3b3b3; margin: 0px; padding: 2px; height: 100%; } div.panelbox div.content div { width: 100%; height: 100%; overflow: auto; } #panelBox1 { height: 100%; }
The content element should take up the remaining space left by the the header. How can I ensure that the height of the content is 100% of the box minus the height of the header? Similar TutorialsHere is the default css.css file for a php directory I use >> http://www.phpmydirectory.com/demo/template/default/css.css I want to create custom fields in user/listee admin that allow a user/listee to choose things like scrollbar colors, page colors, text sizes etc on their individual listing page. Each listing page has a header.tpl file w/ <head>/</head> section. Each .tpl file calls the default css.css file above. How can I echo new css fields into either the css.css file or the actual listing.php of the listing page itself? I got a suggestion to use this but I cannot make it work. Code: <? if (on_page('listing.php')) { ?> etcetcetc
I've tried maybe 10 different ways. No luck. Should I convert the css file to php file & echo custom fields into it & call the php/css file to the listing page header? Hey guys, quick question. I have a liquid layout. I have a few images that I would like to scale along with the layout but I can't do it. I have tried percentages and no luck. how is that possible cross browser without javascript (i dont know if these filters in IE is javascript but they are good) i know its possible...only i dont know how.. must be someone here who know i thought thanx a lot in advance Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Hi, I'm trying to make my own custom CSS for Internet Explorer to load when I visit the www.tv.com site. How do I go about making it domain specific? Is there an IE alternative to Firefox's @-moz-document domain("tv.com") method? I am new to coding so dont make fun of me or anything if this is stupid.. I'm coding my own tumblr right now, and it looks pretty good so far. I just dont know the code to make an image 'static' and stay at the top. If you take a look (hockey-lax-bro.tumblr.com/) you will see what i mean. The follow button and picture on the right 'follow' you wherever you scroll. Code: <div style="position:right;5px:top;25px">
<a href="https;||twitter.***/J_Harris012" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @J_Harris012</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.***/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style="position:right;30px:top;55px">
<a href="http;||i42.tinypic.***/2ai0etj.***" target="_blank">
<img class="normal" src="http;||i46.tinypic.***/15o8nj9.***" alt="install theme" />
</a>
</div>
Thats the coding that i have right now ^^ (i had to change a few things because new members are not allowed to post links) what do i need to change to make the buttons stay at the top? I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something. I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use? Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. Can I use custom fields in IE or not? This is the complete example page I'm working with: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #00FF00;
background-color: black;
}
.content {
position:absolute;
width:75%;
margin:5px 0px 0px 165px;
border:0px;
line-height: 20px;
z-index:3;
}
fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
}
header {
font-weight: bolder;
color: blue;
}
date {
font-weight: bolder;
color: red;
}
-->
</style>
</head>
<body>
<version>version: 3.1.0</version>
<div class="content">
<fieldset>
<date>2004-05-04</date>
<hr />
<header>Title1</header>
And Entry
</fieldset>
<fieldset>
<date>2004-01-21</date>
<hr />
<header>Title 2</header>
A Second Entry
</fieldset>
</div>
</body>
</html>
You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)? Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up. Here is my CSS code: Code:
#container {
background-color: #726554;
width: 791px;
text-align: left;
margin: 0 auto;
}
#top {
position: absolute;
top: 0px;
left: 0px;
width: 791px;
height: 145px;
vertical-align: top;
}
#content {
background: #726554 url(PHP/img/right.jpg) right repeat-y;
margin-top: 30px;
width: 496px;
text-align: left;
vertical-align: top;
float: left;
}
#content p {
color: #f1f1f1;
font-family: Tahoma;
font-size: 13px;
margin: 0 0 10px 12px;
}
#content .date {
display: block;
color: #ff9100;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
}
#left {
vertical-align: top;
float: left;
width: 265px;
height: 671px;
}
#contact {
clear: both;
background: #726554 url(PHP/img/right.jpg) right repeat-y;
font-size: 13px;
font-family: Tahoma;
text-align: center;
}
I don't think you'll need any HTML code for this problem, but let me know if you do! Thanks in advance, Jason I have a question. If i create a custom class : p.q {color: black !important;} and a user has a css with the fallowing code: p {color: red !important;} will my text <p class="q">My text</p> be red or black and how can i prevent the user css from overriding my css I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment. is this possible. I thought I saw that somewhere floating around, but i can't seem to find it. thanks in advance. I've been wrapping my head around how to apply a border at the bottom of an image, using the following: .menupic:link { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 0px solid #ffffff; border-left: 0px solid #ffffff; } .menupic:hover { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 4px solid #ffffff; border-left: 0px solid #ffffff; } It works fine in Mozilla, but I just cannot get the hover to work in IE, unless the border is completely solid and 1px+ for all a: states (kinda defeats what I'm trying to do), and it also works if I add float:left/right (which also is no good, as that messes up my design). Anybody found a css work around this problem? Is it possible to specify a custom image for a border style? as seen in this forum when posting a message, i was wondering how they get it so that the title of a section appears inside the border? example: ------ Title here --------------------| | | | bit of content | | | | | ------------------------------------- hello, i'm placing a custom cursor on a stylesheet like so: body { cursor: url(normal.cur), default; } and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)? thanks for any help! When i add sifr to my site i am experiencing the following problems 1. Some elements disapear. ( the date componet ) 2. theres a space at the start of each para. 3. text justify is not being applied. u can see both the pages here http://harshamv.com/test.php the original page with out siFr http://harshamv.com/index.php Is there any way to add fonts to the web design better than this ? I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS I started using custom borders after seeing ALA's article on custom borders, but I'm running into a problem. If the overall width of the article isn't over 300px, then it doesn't bridge all the way, but I'm not wanting 300px width. Is there any way to eleminate the gap at the bottom. BTW, it's not just an IE thing, it's doing that in FF, and Opera too. Here's my code: Code: div.Article {
background:
url(images/menu/topleft.jpg)
top left no-repeat;
}
div.Article h2 {
background:
url(images/menu/topright.jpg)
top right no-repeat;
font-size:1.3em;
padding:15px;
margin:0;
color: #000;
}
div.ArticleBody {
background:
url(images/menu/right.jpg)
top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
}
div.ArticleFooter {
background:
url(images/menu/bottomleft.jpg)
bottom left no-repeat;
}
div.ArticleFooter p {
background:
url(images/menu/bottomright.jpg)
bottom right no-repeat;
display:block;
padding:15px;
margin:-2em 0 0 0;
}
HTML too: Code: <div class="Article" style="width: 210;">
<h2><b>Menu</b></h2>
<div align="center">
<div class="ArticleBody">
<p>Text</p>
</div>
<div class="ArticleFooter">
<p style="color: #000;">
A paragraph containing author information
</p>
</div>
</div>
</div>
Thanks, Marty J. Hello all, I've been over at ALA and I came across this nice example on custom Borders and Corners and I've been playing with it but I'm still too green to get the effect I want. Basicaly, I just want to get ride of the footer text section and allow the main body section to streach all the way into the footer. If I just delete the footer text, it leaves an offely large gap between the main content and the bottom of the 'box'. So, how would I go about editing this example to not include a footer section, but still retain the bottom of the 'box'? Thanks for any help! Cheers, Fozzy |
|||||||