|
CSS - Webpage To Take The Browser Size
hello guys,,
I was wondering how to make a webpage take the full browser size and not over flow or be smaller than the browser window also atleast 800 x 600 thnx for ur time.. HMV Similar TutorialsSo when using Netscape 7.2 & Opera 7.5 and MSIE 6.0, How do you get a simple tag like body { font-size:small; } to be equal in all browsers? Setting IE Text Size to Medium, and Opera's Zoom to 100% (both defaults) and Netscape 7.2 to 120% (not the default) is one way, but is there a CSS way? By the way, the child element hack "body>div {property}" wasn't working no matter what I tried, by not working I mean to say Netscape never would read it or apply it. It appeared to be that Opera & IE need to read the same value while Netscape needs to apply a larger size to be equal to IE's and Opera's rendering. B I have a simple question that has been driving me insane - I have a very simple website that has a header div, and a table that shows a lot of information (imagine an Excel spreadsheet). The table stretches the website as long as the table is because it simply will not fit on any screen (I think it's about 4200px wide). This is the desired behaviour I want for this table. However, my header div, will only show 100% wide, the width of the screen before it scrolls. I need to extend it beyond the screen to however wide the website has been made from the dynamic table. Please advise, thank you. So I've got a page on which a menu exists (or will) that is a certain width, I believe 854px. Now I know that this isn't the best idea, but I'm following someone's specific orders so meh. Now, my problem is that I want the page to resize according to the browser size and fill the page, so if the browser size is 1054 then I want the background image at the top to run the entire width of the page, and the menu, I'd want to center. Now if the browser is 854px or wider, then the page looks fine, but when the browser is anything less, then the menu, because it is a specific width, expands as it should as well as centers itself forcing a horizontal scroll bar, but the rest of the page is acting like it is ONLY 854px and therefore it cuts off and is now no longer centered with the menu. It must be possible to do, right? Here's a link to the page I'm using for debugging purposes http://www.agentjeff.com/headerv10.html In my web docs, in FF, the text size can be adjusted in the browser, but not in IE. Why would this be? I'm using points to define font size by the way. Hello, I'm using jquery and the cycle plugin to cycle through a few images on my homepage inside a container.When i load the website at any browser size, it seems to do the proper thing. The problems arise when i try to make the browser bigger or smaller after that, it does funky things to the images. If you begin to scale the browser when the first image is displayed, it also seems to scale properly for that first image, but goes haywire after that. It pretty much does it in all browsers and i can't seem to figure out if it's something im not setting properly within css or if it have something to do with jquery and the cycle plugin. here's the website thus far: www.beaucoupla.com this is my first time writing code so please any help would be appreciated! Code:
@charset "utf-8";
/* CSS Document */
#mainWrapper {
/*
background:#000 right top no-repeat;
min-width:1000px;
min-height:775px;
border:0px;
background-color:#000; */
padding: 0 0 0 1px;
margin:0;
top:0;
left:0;
width:100%;
}
.mainbar {
position:absolute;
top:0px;
left:0px;
display:none;
visibility:hidden;
width:78%;
min-height:100%;
height:auto;
/*This works for IE7
min-height:775px;
height:775px;*/
border-right: #FFF solid medium;
}
#imagelist {
left:0;
position:absolute;
display:block;
visibility:visible;
/* width:auto; static size */
}
#imagelist img {
display:block;
}
#imagelist img.first {
display:block;
}
.theimage {
position:absolute;
left:0;
width:100%;
/* Adding this works for IE7 */
/* height:775px; */
border-right: solid #FFF medium;
}
#podcast {
/*right:303px; */
position:absolute;
top:0px;
left:0px;
height:100%;
}
.about_info p {
font-size:1.1em;
}
.contact_info, .about_info, .news_info {
position:relative;
margin-top:4em;
margin-left:10%;
width:78%;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:1.3em;
color:#FFF;
height:100%;
}
.contact_info #title, .about_info #title, .news_info #title {
font-size:1.75em;
padding-bottom:1.5em;
color:#1ac089;
color:#03c5d1;
}
.contact_info .heading {
color:#c04141;
font-size:1.2em;
}
.contact_info .mail {
text-decoration:underline;
}
.contact_info a:hover {
color:blue;
text-decoration:underline;
}
.news_info .heading {
color:#c04141;
}
body {
/*width:1400px;
height:775px;*/
padding:0;
margin:0;
border:0;
background-color:#000;
}
#share td {
padding-left:0.5em;
}
#share {
margin-left:1.4em;
margin-top:0;
border-top:0;
/* padding-top:5; */
font-size:0.65em;
}
.sidebar {
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin-left:78%;
margin-top:1em;
font-size:2em;
color:#FFF;
}
ul {
border:0;
margin:2px;
text-decoration:none;
}
li {
list-style:none;
}
a {
text-decoration:none;
color:#FFF;
}
a.home:hover {
color:#bc7bd4;
}
a.news:hover {
color:#7bd488
}
a.podcast:hover {
color:#d47b88;
}
a.blog:hover {
color:#d4cb7b;
}
a.about:hover {
color:#7bd4c6;
}
a.contact:hover {
color:#d4a37b;
}
a.twitter:hover {
color:#33ccff;
}
a.myspace:hover {
color:#999;
}
a.facebook:hover {
color:#5b61d5;
}
I am having few html pages with external CSS used. Now when i want to change the brower text using View->Text size, its not allowing. Yes, i can change the font size in my CSS but I dont want all should see in the same font. Few people viewing those pages may not like that font. So, Can any body help me to find out how to change the text size of an html page having CSS. Hi, Here's the site I'm working with: http://www.cjfusion.com I want to get that image centered on the browser window and then depending on how big the viewers screen is, the browser will cover up the left and the right. I hope that makes sense. I almost want it to be fluid, but I'm unsure how to do that. Ask questions if this doesnt make sense. Its hard to explain. -CJ Hi I am trying to learn how to design and develop a website that has consistent behavior across browsers, browser window size and screen resolution. What are the industry best practices for designing and developing such websites. Your help is appreciated Thanks Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks I could see this as potentially being really easy to do or really hard to do. I'm hoping for the former. Suppose I have 3 divs, A, B, C and that I want the total width of A + B + C to equal the width of the screen. Suppose also that I want them to be inline. How can I have B to be a fixed width while A and C expand depending on the screen width (such that the width of A = the width of C)? My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. hi every one i am kind of new to this i am making a website but how do you put css on you webpage i am using web page maker and i want to put a table on my website just take a look at tothegame.com and see their table for games and stuff and i also want to use the search function and the filter and the abcdfg function how do i get or where do i get that kind of tables for my website its amovie site and i want to use that as a list for my movies that people can choose and filter by name or released date hope that ssomebody can help me out thanks I am trying to make a 3 column web page. I have the middle column, but when I add the code below for the left and right columns, nothing shows up. Is this the wrong code? Do I need to wrap them in certain tags? Thanks for your help! Website: www.freewebs.com/weareamazing Code: #sidebar-a {
float: left;
width: ;
margin: 0;
margin-right: ;
padding: 5px;
background-color: white;
}
#sidebar-b {
float: right;
width: ;
margin: 0;
margin-left: ;
padding: 5px;
background-color: white;
}
hello guys, I am creating a webpage using CSS for my layout. when I look at the page, it seems ok but all my "DIV" are positoned relative to the left side of the screen. so if you maximize the screen, you get a huge space on the far right side of the screen. I was wondering if there is anyway I can centre the page in the window no matter the size of the screen. I have provided a link to a version of the page and the CSS file is included here. each id represents a DIV in the design. http://www.radien.plus.com/test.html thanks guys Code:
#Logo
{
Margin : 0;
Padding : 0;
Width : 125px;
Height : 125px;
Border-color : aqua;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Border-top : 1px solid#00;
Border-bottom : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-right : 1px solid#00;
}
#news
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 250px;
position : absolute;
top : 140px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#Products
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 200px;
position : absolute;
top : 397px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#unknown
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height :150px;
position : absolute;
top : 605px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#banner
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 604px;
Height : 125px;
position : absolute;
left : 140px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#shopping
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 125px;
Height : 125px;
position : absolute;
top : 7px;
left : 750px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#search
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 90px;
position : absolute;
top : 140px;
left : 725px;
Padding : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#poll
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
left : 725px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
#footer
{
Font-family : Arial , Helvetica , Sans Serif;
Font-size : 80%;
Font-weight : normal;
Margin : 0;
Border-top-width : medium;
Border-right-width : medium;
Border-bottom-width : medium;
Border-left-width : medium;
Width : 150px;
Height : 210px;
position : absolute;
top : 238px;
left : 725px;
Padding : 3;
Margin-top : 0;
Text-indent : 3px;
Border-top : 1px solid#00;
Border-right : 1px solid#00;
Border : 1px solid#00;
Border-left : 1px solid#00;
Border-bottom : 1px solid#00;
}
Hey guys so I'm trying to create a bar at the top of my webpage, except the left and right sides are different than the middle. So I thought I'd approach this by dividing up the webpage into three sections, left middle and right. Code:
body { background-color:#B7E7F9; }
/*Big Wrap*/
#mainwrap{ margin-top:0px; height: 100%; width: 100%; }
/*Left Side*/
#leftwrap{ align: left; background:url(images/Left_Top_Bar.jpg) no-repeat; }
/*Right Side*/
#rightwrap{ align: left; background:url(images/Right_Top_Bar.jpg) no-repeat; } /*Header*/
#header{ background:url(images/Top_Bar_Part.jpg) repeat-x; }
I then implemented it in html 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Webpage</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head>
<body>
<div id="mainwrap">
<div id="leftwrap"></div>
<div id="header"></div>
<div id="rightwrap"></div>
</div>
</body>
</html>
Now when I open the html file in a browser, all I see is the background color that I put in for body, but none of my wraps seem to be displaying. I was also wondering if there was an easier way to do this. The header is just a simple rounded rectangle that is running across the entire top. I want the same rounded rectangle look for all users regardless of resolution. Thank you for your help, Popnbrown I have a QA site where I want to have a very translucent image displayed over the entire page to help our testers more visually recognize that the site they are on is not production (or worse thinking they are on QA when they are on production). My initial idea was to create a fixed position div with a repeating background images. While this visually accomplished what I want, it ends up masking the entire site, making it impossible to click on any links that are displayed underneath the QA images. What is the best way to do this (sans javascript)? Any help is much appreciated. Hey Folks, I am a newbie with designing webpages and having some problems with a website that I just created. If any of you could point to a resource of help me out, that be great. Heres the link www.pcdigger.com The middle part is messed up in firefox. HTML and CSS both are validated per www.w3.org but I guess, that doesnt do anything for firefox. Thanks, DesignFlaw I know it's probably something simple, but I'm having trouble centering my web page in CSS. I want to center it no matter what resolution a visitor has their monitor set to or the size of their monitor. I've tried the following to no avail: Code: margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; Any suggestions? Hello - this is my first time on the forum. I'm sure I must be missing something really simple. I'm not very experienced at CSS, and must admit I can't grasp the inherited properties principle, which may be the cause of my problem. I've pasted my code for the web page and my properties stylesheet below. Although, as you can see, I want to put a header near the top of the web page, nothing appears in my browser. (I mean nothing, the words I have put the header tag to just aren't there). I would be very grateful for some help. Thank you. The CSS validator says "Value Error : color attempt to find a semi-colon before the property name. add it" which I don't understand. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <title>Love Local Food - about us</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="love local food, love local, love food, local food, exeter food, devon food, devon vegetables, exeter vegetables, local vegetables, real bread, slow food, slow food exeter, slow food devon, rye bread, good food, good local food, van food, van exeter, van devon, local van, mobile shop, workshops, workshop, farm, farms, organic, organic food exeter, fresh food, local fresh food, fresh food exeter, fresh food devon " /> <meta name="description" content="We sell good fresh food by van in your locality" /> <meta http-equiv="PRAGMA" content="NO-CACHE" /><!-- --> <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" type="text/css" href="presentation.css" /> </head> <body> <!-- Header --> <div id="bar-top"> <p class="links"> <a href="index.html">home </a> <a href="mobileshop.html">mobile shop </a> <a href="farms.html">farms </a> <a href="workshops.html">workshops </a> <a href="joinus.html">join us </a> <a href="aboutus.html">about us </a> <a href="contactus.html">contact us </a> </p> </div> <!-- end of header --> <!-- main column --> <div id="main"> <p> <img src="slice4.jpg" alt="love local food" border="0" width="400" height = "125" class="center" /></p> <p> <img src="logo.gif" alt="love local food" align="left" border="0" width="300" height="175" /></p> <p class="header">about love local food</p> <p> Love Local Food is a new social enterprise initiated by Emmas Bread, Shillingford Organics, West Town Farm and organicArts along with others including David Tuffield, David Bossano, Rachel Moffat, Nicola Beglin, Paula Garwood, Amber Dawkins and Chukumeka Maxwell.</p> <p class="text">We are a group of local producers, educators and passionate food lovers who propose to bring a new and simple way of shopping to Exeter and surrounding areas.</p> <p class="text">We first met in July 2007 with the intention of becoming a workers co-operative that supported each other in the produce and sale of locally grown food.</p> <p class="text">We want to provide local food to local communities, provide a fair return to local producers and provide links between the consumer and producer through educational activities and resources.</p> <p class="text">We want to help consumers make the connection between the food they eat and the environment in which they live, and to help local people achieve well being.</p> <p class="text">We look to a future of the sustainable production and distribution of food, including allotments and gardens, where we renew our relationship with food and nature, and share the land.</p> <p class="text">A future where local communities, schools and other institutions are involved in commissioning local food production, community celebrations and sharing with other cultures.</p> <p class="text">A future where we are all open to new ideas about food and our relationship with it.</p> <!--links-box--> <div id="links-box"> <p class="links"> <a href="emmasbread.html">emmas bread </a> </p> <p class="links"><a href="shillingford.html">shillingford organics </a></p> <p class="links"><a href="westtown.html">west town farm </a></p> <p class="links"><a href="organicarts.html">organicARTS </a> </p> </div> <!--end of links box--> </div> <!-- end of main column --> </body> </html> /* Presentation Stylesheet */ .header { font-family: Arial, Helvetica, sans-serif; font-size:20px; color:#000000 margin:0; padding:10px 10px 10px 15px; } .links { font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:20px; color:#000000; } .links a:link { color: #560007; text-decoration:none; } .links a:visited { color: #EF9C00; text-decoration:none; } .links a:active { color:#560007; text-decoration:none; } .text { font-family: Helvetica, Arial, Verdana, sans-serif; font-size:15px; color:#000000; } |
|||||||