Some Style/Layout help please!

  • Resolved winger15mk

    (@winger15mk)


    15 years, 6 months ago

    Hi Guys i am working in my new portfolio website using the ‘simplefolio’ theme.

    I want the top of my ‘about’ to look the same as this website:

    http://niittymaa.com/ansioluettelo/

    but not sure how to style it like that with the image/headings/dashed lines layout.

    I have got as far as recreating the box by using the blockquote tag but that is about it.

    Thanks for your help in advance!

    Gary

Viewing 2 replies - 1 through 2 (of 2 total)
  • miocene22

    (@miocene22)

    15 years, 6 months ago

    here’s something I rustled up quickly:

    html:

    <div id="about">
	<div class="name">
		<img alt="me" class="pic" src="http://niittymaa.com/wp-content/uploads/2010/03/omakuva_small.png" />
		<div>
			<h2>My Name</h2>
			<h3>My description</h3>
		</div>
	</div>
	<div class="contact">
		<h3>contact</h3>
		<p><span class="contact1">Phone:</span> 012345675</p>
		<p><span class="contact1">email:</span> la@la.com</p>
	</div>
	<div class="clear">
	</div>
</div>

    css:

    #about {
	width: 80%;
	background-color: #dddddd;
	border: 1px #aaaaaa solid;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
}
.name {
	float: left;
	width: 60%;
	border-right: 1px #ccc dashed;
}
.name div {
	float: left;
}
.name .pic {
	float: left;
	margin: 5px;
	padding: 4px;
	border: 2px #ccc solid;
	background-color: #fff;
}
.name h3 {
	margin-top: 4px;
}
.name h2 {
	border-bottom: 2px green dashed;
	margin-bottom: 0px;
}
.contact {
	float: right;
	padding: 10px;
	width: 30%;
}
.clear {
	clear: both;
}

    Obviously I’m not gonna do it all but it shouldn’t be too hard to get it looking similar to that on the page you linked to.

    Thread Starter winger15mk

    (@winger15mk)

    15 years, 6 months ago

    Thats fantastic! Thank you so much for your help 😀

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Some Style/Layout help please!’ is closed to new replies.