Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts

    HTML Fieldset help needed

    Hi,

    I'm making a personal map helper for a game I play, and I have two fieldsets that I want to put next to each other. I've looked everywhere for a solution, but the ones I've found only put them next to eachother, but without combining them. My page currently looks like this

    But I want it to look something like this (*note, I edited the image to give you an idea of what I want)

    Can anyone help me? Thanks. I'll post my html and css codes if needed.
    Last edited by Byo476; 10-31-2011 at 11:54 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    yeah that just involves floating an object, essentially you are just going to float the first fieldset, then clearing

    post the full code!

    thanks

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Page.html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="style.css"/>
    <title>League Town</title>
    <style>
    html {
    	background: #414141 url('../images/body_bg.gif') repeat-x fixed left top;
    	padding: 20px 0px;
    	overflow-y: scroll;
    }
    body {
    	width: 900px;
    	margin-left: auto;
    	margin-right: auto;
    	padding: 20px;
    	font-family: Arial;
    	font-size: 10pt;
    	background: #6F6F6F;
    }
    body, .mask {
    	border: 1px solid #000000;
    	background-color: #6F6F6F;
    	color: #FBDB00;
    }
    
    	.column > fieldset:nth-of-type(n) {
    		margin: -14px 2px 0px;
    		padding-bottom: 18px;
    	}
    	.column > fieldset:first-of-type {
    		margin-top: 0px;
    	}
    	.column > fieldset > legend {
    		border-radius: 8px;
    	}
    	.column > fieldset:not(:last-of-type) {
    		border-bottom: 0px;
    	}
    	.column > fieldset:last-of-type {
    		padding-bottom: 5px;
    		border-radius: 0px 0px 16px 16px;
    	}
    	.column > fieldset:first-of-type {
    		border-radius: 16px 16px 0px 0px;
    	}
    	img {vertical-align: bottom;}
    
    a, a:visited, legend {color: #FFF29C;}
    a:hover {color: #FEF8CD;}
    
    legend {background-color: #868686;}
    .tbor, fieldset, legend, .border {
    	border: 3px outset #030303;
    	-moz-border-bottom-colors: #030303;
    	-moz-border-left-colors: #030303;
    	-moz-border-right-colors: #030303;
    	-moz-border-top-colors: #030303;
    }
    .tbor td {border: 1px outset #030303;}
    td {
    	padding: 2px;
    	vertical-align: top;
    }
    .tmid {margin-left: auto; margin-right: auto;}
    
    h1, h2, h3 {
    	text-decoration: underline;
    	text-align: center;
    	margin-top: 0px;
    }
    table {border-collapse: collapse;}
    ul, ol {
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    
    .left {text-align: left;}
    .center {text-align: center;}
    .right {text-align: right;}
    .top {vertical-align: top;}
    .middle {vertical-align: middle;}
    .bottom {vertical-align: bottom;}
    
    .big {font-size: 14pt;}
    .small {font-size: 8pt;}
    
    fieldset {padding: 5px 10px;}
    legend {
    	padding: 2px;
    	font-weight: bold;
    }
    </style>
    </head>
    
    <body>
    <div class="column"><fieldset></fieldset>
    <fieldset><legend>Location</legend>
    <h2>Town</h2>
    <table class="tmid">
    <tbody>
    <tr>
    <td>
    <div style="position: relative;">
    <br>
    <br>
    <br>
    <br>
    townimage.jpg
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    <div class="column">
    <fieldset><legend>Navigation</legend>
    <table class="tmid">
    <tbody>
    <tr>
    <td>
    <div style="position: relative;">
    <br>
    <br>
    <br>
    <br>
    north.jpg west.jpg east.jpg south.jpg
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    
    <fieldset>
    <legend>Monsters</legend>
    <table style="margin-left: 25px;">
    <tbody>
    <tr>
    <td><img src="images/636.png"/></td>
    <td class="middle">Monster1</td>
    <td class="right small middle">Lv. 03</td>
    </tr>
    <tr>
    <td><img src="images/642.png"/></td>
    <td class="middle">Monster2</td>
    <td class="right small middle">Lv. 03</td>
    </tr>
    <tr>
    <td><img src="images/702.png"/></td>
    <td class="middle">Monster3</td>
    <td class="right small middle">Lv. 03</td>
    </tr>
    <tr>
    <td><img src="images/826.png"/></td>
    <td class="middle">Monster4</td>
    <td class="right small middle">Lv. 10-12</td>
    </tr>
    </tbody>
    </table>
    </fieldset>
    
    </body>
    </html>
    The page isn't actually this messy (with <br> and stuff) It was just for the demonstration ^^; I implemented style.css directly into the page.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    http://kimblim.dk/css-tests/selectors/

    let me look at your code and try work something out

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I use Firefox 7.0.1., if that helps :P

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    do you want me to rewrite your code or just fix it

    EDIT: nvm, this is going to need to be rewritten

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    wow that was a lot harder than I thought it would be LOL

    live view:
    http://testing1357.herobo.com/

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>League Town</title>
    		<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
    		<style type="text/css">
    			
    			* { margin: 0; padding: 0; }
    			
    			body, html {
    				background-color: #333;
    				height: 100%;
    			}
    			
    			body {
    				font: 13px/1.5 Arial, Helvetica, sans-serif;
    			}
    			
    			a { }
    			a:hover { text-decoration: underline; }
    			
    			fieldset {
    				border: 1px solid;
    			}
    			
    			.boxes {}
    			.boxes fieldset {
    				border: none !important;
    				border-top: #000 3px solid !important;
    				min-height: 40px
    			}
    			.boxes fieldset legend {
    				border: #000 3px solid;
    				padding: 5px 10px;
    				background-color: #DDD;
    				margin-left: 20px;
    				border-radius: 10px;
    				-webkit-border-radius: 10px;
    				-moz-border-radius: 10px;
    				font-weight: bold;
    			}
    			.boxes .box {
    				border: #000 3px solid;
    				overflow: hidden;
    				width: 100%;
    				box-sizing: border-box;
    				-ms-box-sizing: border-box;
    				-moz-box-sizing: border-box;
    				padding-top: 8px;
    				border-radius: 18px;
    				-webkit-border-radius: 18px;
    				-moz-border-radius: 18px;
    			}
    			.boxes .small-box {
    				position: relative;
    			}
    			
    			.boxes .joined {}
    			.boxes .joined .small-box {
    			}
    			.boxes .joined .divider {
    				height: 100%;
    				background-color: #000;
    				width: 3px;
    				position: absolute;
    				left: -3px;
    				margin-top: 16px;
    			}
    			
    			.boxes .location {
    				margin-bottom: 10px;
    			}
    			.boxes .location .loc {
    				width: 521px;
    				float: left;
    			}
    			.boxes .location .nav {
    				width: 370px;
    				float: right;
    			}
    			
    			.filler {
    				min-height: 200px;
    			}
    			
    			/* -----[header]----- */
    			#header { height: 40px; }
    			
    			/* -----[content]----- */
    			#content {
    				width: 900px;
    				margin: 0 auto;
    				border: #000 1px solid;
    				padding: 20px;
    				background-color: #666;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div id="header"></div>
    			<div id="content">
    				<div id="town-name" class="boxes">
    					<div class="location joined box">
    						<div class="loc small-box">
    							<fieldset>
    								<legend>Location</legend>
    								<div class="filler"></div>
    							</fieldset>
    						</div>						
    						<div class="nav small-box">
    							<div class="divider"></div>
    							<fieldset>
    								<legend>Navigation</legend>
    								<div class="filler"></div>
    							</fieldset>
    						</div>
    					</div>
    					<div class="monsters box">
    						<div class="small-box">
    							<fieldset>
    								<legend>Monsters</legend>
    								<div class="filler"></div>
    							</fieldset>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    Last edited by Sammy12; 10-31-2011 at 03:08 AM.

  • Users who have thanked Sammy12 for this post:

    Byo476 (10-31-2011)

  • #8
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    It's fine with me, thanks.

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    That's exactly what I wanted, thank you so much!

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    sorry for rewriting and taking so long. it was actually amazingly difficult. sorry for all the inconvenience!!

    a little buggy in some versions but i think you get the idea
    Last edited by Sammy12; 10-31-2011 at 03:12 AM.

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    sorry for rewriting and taking so long. it was actually amazingly difficult. sorry for all the inconvenience!!

    a little buggy in some versions but i think you get the idea
    I didn't expect it to be that difficult >.< Thanks again!

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    * { margin: 0; padding: 0; }
    
    body, html {
    	background-color: #333;
    	height: 100%;
    }
    
    body {
    	font: 13px/1.26 Arial, Helvetica, sans-serif;
    }
    
    a { }
    a:hover { text-decoration: underline; }
    
    .boxes {
    	border: 3px solid;
    	padding: 25px 0;
    	border-radius: 18px;
    	-webkit-border-radius: 18px;
    	-moz-border-radius: 18px;
    	background-color: #1A1A1A;
    	background-image: -webkit-linear-gradient(top, #222 40%, #111);
    	background-image: -moz-linear-gradient(top, #222 40%, #111);
    	background-image: -o-linear-gradient(top, #222 40%, #111);
    	background-image: -ms-linear-gradient(top, #222 40%, #111);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#111');
    }
    /* controls all border colors of "boxes" - to override use !important; */
    .boxes,
    .boxes * {
    	border-color: #111 !important;
    }
    .boxes .box {
    	position: relative;
    	border-top: 3px solid;
    	min-height: 200px;
    	background: #555;
    }
    .boxes .box .legend {
    	border: 3px solid;
    	background: #DDD;
    	line-height: 30px;
    	position: absolute;
    	top: -18px;
    	left: 20px;
    	padding: 0 10px;
    	font-weight: bold;
    	width: auto;
    	border-radius: 8px;
    	-webkit-border-radius: 8px;
    	-moz-border-radius: 8px;
    }
    
    .boxes .joined {
    	width: 100%;
    }
    .boxes .joined .box {
    	float: left;
    	box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-o-box-sizing: border-box;
    	overflow: visible !important;
    	width: 100%;
    }
    .boxes .joined .large {
    	width: 550px;
    }
    .boxes .joined .small {
    	width: 364px;
    	border-left: 3px solid;
    }
    .boxes .box:not(.joined):last-child {
    	border-bottom: 2px solid;
    }
    
    .clear {
    	clear: both;
    }
    
    #guide #content {
    	border: #222 1px solid;
    	background-color: #666;
    }
    
    /* -----[header]----- */
    #header-container { min-width: 900px; }
    #header { height: 40px; position: relative; }
    
    /* -----[content]----- */
    #content-container { min-width: 900px; }
    #content {
    	width: 920px;
    	position: relative;
    	margin: 0 auto;
    	padding: 30px;
    }
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>League Town</title>
    		<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
    	</head>
    	<body id="guide">
    		<div id="wrap">
    			<div id="header-container">
    				<div id="header"></div>
    			</div>
    			<div id="content-container">
    				<div id="content">
    					<div id="town-1" class="boxes">
    						<div class="l-n joined">
    							<div class="location box large">
    								<div class="legend">Location</div>
    							</div>
    							<div class="navigation box small">
    								<div class="legend">Navigation</div>
    							</div>
    							<!-- clear needed if using "joined" (2 boxes) -->
    							<div class="clear"></div>
    						</div>
    						<div class="monsters box">
    							<div class="legend">Monsters</div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

  • Users who have thanked Sammy12 for this post:

    Byo476 (10-31-2011)

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    11
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This is even better The black bars are a bit troublesome, but I'll deal with that myself. Thanks for all your help!

  • #14
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    new css, fixes for ie7 and safari
    black bars have been commented out

    the font: 13px/1.26 is the font-size/line-height(multiplier - 13px x 1.26 = 16 pixel height) which will scale all your elements so that overflow: hidden; won't cut anything off (like the bottom of y's)

    -good luck on your site

    Code:
    * { margin: 0; padding: 0; }
    
    body, html {
    	background-color: #333;
    	height: 100%;
    }
    
    body {
    	font: 13px/1.26 Arial, Helvetica, sans-serif;
    }
    
    a { }
    a:hover { text-decoration: underline; }
    
    .boxes {
    	border: 3px solid;
    	padding: 25px 0;
    	border-radius: 18px;
    	-webkit-border-radius: 18px;
    	-moz-border-radius: 18px;
            /*
    	background-color: #1A1A1A;
    	background-image: -webkit-linear-gradient(top, #222 40%, #111);
    	background-image: -moz-linear-gradient(top, #222 40%, #111);
    	background-image: -o-linear-gradient(top, #222 40%, #111);
    	background-image: -ms-linear-gradient(top, #222 40%, #111);
    	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#202020', endColorstr='#101010');
            */
    }
    /* controls all border colors of "boxes" - to override use !important; */
    .boxes,
    .boxes * {
    	border-color: #111 !important;
    }
    .boxes .box {
    	position: relative;
    	border-top: 3px solid;
    	min-height: 200px;
    	background: #555;
    }
    .boxes .box .legend {
    	border: 3px solid;
    	background: #DDD;
    	line-height: 30px;
    	position: absolute;
    	top: -18px;
    	left: 20px;
    	padding: 0 10px;
    	font-weight: bold;
    	width: auto;
    	border-radius: 8px;
    	-webkit-border-radius: 8px;
    	-moz-border-radius: 8px;
    }
    
    .boxes .joined {
    	width: 100%;
    }
    .boxes .joined .box {
    	float: left;
    	overflow: visible !important;
    	_width: 100%;
    }
    .boxes .joined .large {
    	width: 550px !important;
    }
    .boxes .joined .small {
    	width: 361px !important;
    	border-left: 3px solid;
    }
    .boxes .box:not(.joined):last-child {
    	border-bottom: 2px solid;
    }
    
    .clear {
    	clear: both;
    }
    
    #guide #content {
    	border: #222 1px solid;
    	background-color: #666;
    }
    
    /* -----[header]----- */
    #header-container { min-width: 900px; }
    #header { height: 40px; position: relative; }
    
    /* -----[content]----- */
    #content-container { min-width: 900px; }
    #content {
    	width: 920px;
    	position: relative;
    	margin: 0 auto;
    	padding: 30px;
    }
    Last edited by Sammy12; 10-31-2011 at 11:59 PM.

  • Users who have thanked Sammy12 for this post:

    Byo476 (11-01-2011)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •