trying to determine what size element needs to be

in order for it to be included in my html page

Page 1 of 1

1 Replies - 1159 Views - Last Post: 21 February 2010 - 01:10 PM

#1 chicaloca   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 48
  • Joined: 20-May 09

trying to determine what size element needs to be

Posted 21 February 2010 - 11:53 AM

i everyone

basically someone has asked me to design them a site, i did a web design course but that was 6 months ago and i need to learn new things for it as well as try and remember what ive learned!

ive got a semi basic layout, ill post the html and css, hopefully ill pate them in the right way (this definitely wont be the colour scheme, ive been following an online tutorial, want to get the layout right before making other tweaks)

in the content section theyre looking for a rectangular box that has 4 imaes, 2 side by side and two below. these will change when theyre rolled over and when a particular image is clicked it will take them to the correct section of the site.


as far as i understand from the css i have the size of the content section will change depending on how much information is there. what i really need to find out is how would i know what size to make the flash for insertion into this section so it fits properly without any gaps? sorry im a bit new to this but the more i learn the better! i dont have a clue how to actually code the flash yet but getting the size right would be a good start! how could i alter my css to include it in the content section? thanks for your help :)



@charset "utf-8";
/* CSS Document */

html, body {      /*resets the margins and padding on both the html and body tags to 0 to ensure theres
	              no space between the top of the browser and the top of the page */
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0; /* takes away the default margin and padding on h1 tags */
	padding: 0;
}

.hidden {
	display: none; /* any element with this class wont be seen on the site */
}
#page-container {  /* there is a # as this is an id, to be used once on the page only, not repeated elsewhere 
                   this div's height will change depending on the content*/
	margin: auto; /* browser sets margin, should centre the div */
	width: 760px; /* sets the width of the container */

}

#main-nav {
	background: red;
	height: 50px; /* the width doesnt need to be specified, it will be 760px as this is the with of the containing div */
}

#header {
	background: blue;
	height: 150px;
}

#sidebar-a {
	float: left; /* floats sidebar to left of the screen */
	background: darkgreen; /*the height is dependend on the content so no height will be set for the time being*/
	width: 280px;
}

#content {
	background: green; /*the height is dependend on the content so no height will be set for the time being*/
	margin-left: 280px; /*creates a margin as wide as the sidebar to separate the sidebar information and the content */

}

#footer {
	clear:both; /*When an element has the clear property assigned, if it comes into contact with a float it is placed right below where that float ends.*/
	background: orange;
	height: 66px;
	
}



<link rel="stylesheet" type="text/css" href="css/master.css" /> 
</head>

<body>

<div id="page-container"> <!--this div will hold all the other elements of the page-->

<div id="main-nav">Main Nav</div>
	
	<div id="header">
    <h1> Kilmaclolm Dramatic Society logo to be placed here </h1>
    </div>
	
	<div id="sidebar-a">
    
    		<dl class="hidden">
				<dt id="about"><a href="#">About</a></dt>
				<dt id="services"><a href="#">Services</a></dt>
				<dt id="portfolio"><a href="#">Portfolio</a></dt>
				<dt id="contact"><a href="#">Contact Us</a></dt>
			</dl>
	</div>
	
	<div id="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. 
	Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. 
	Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus 
	euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. 
	Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, 
	purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
    </div>
	
	<div id="footer"><!--floated divs dhould come first to avoid any IE issues-->
			<div id="altnav">
				<a href="#">About</a> - 
				<a href="#">Services</a> - 
				<a href="#">Portfolio</a> - 
				<a href="#">Contact Us</a> - 
				<a href="#">Terms of Trade</a>
			</div>
			Copyright &copy; 
	</div>

</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: trying to determine what size element needs to be

#2 Guest_Excavator*


Reputation:

Re: trying to determine what size element needs to be

Posted 21 February 2010 - 01:10 PM

Hello chicaloca,
From your description

Quote

section theyre looking for a rectangular box that has 4 imaes, 2 side by side and two below. these will change when theyre rolled over and when a particular image is clicked it will take them to the correct section of the site.

It kind of sounds like you want that in #sidebar-a which is 280px wide.
Was This Post Helpful? 1

Page 1 of 1