Jump to content
Willem-Siebe Spoelstra

Any tips about block with rounded corners...

Recommended Posts

Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi,

 

Has anybody good CSS tips how to achieve this layout which I have to rebuild: oudisnieuw[dot]net.

 

Kind regards,

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hi 0899 

 

you can find more information regarding Rounded corners and CSS here http://www.w3schools.com/cssref/css3_pr_border-radius.asp 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi, thanks Martin. 

 

I took my PageLines skills to the next level > I have now a Child Theme to create a layout like oudisnieuw[dot]net.

I'm now able to use the quickslider in my header part of the template.

 

So what's there now are two sections, check this HTML... want I trie to achieve (but I'm not getting it to work) is that both sections are next to each other (tried block displays, relative positions, floats...)

 

<header id="header" class="container-group">
				<div class="outline">
					

<!-- Branding | Section Template -->
<section id="branding" class="container no_clone section-branding fix"><div class="texture"><div class="content"><div class="content-pad"><div class="branding_wrap fix"><a class="plbrand mainlogo-link" href="http://oudisnieuw.net.websrv.makeweb.nl" title="Oud is Nieuw"><img class="mainlogo-img" src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/uploads/landelijk-wonen-oud-is-nieuw.jpg" alt="Oud is Nieuw" /></a><div class="icons" style="bottom: 12px; right: 1px;"></div></div>		
			<script type="text/javascript"> 
				jQuery('.icons a').hover(function(){ jQuery(this).fadeTo('fast', 1); },function(){ jQuery(this).fadeTo('fast', 0.5);});
			</script>
</div></div></div></section>

<!-- QuickSlider | Section Template -->
<section id="quickslider" class="container no_clone section-quickslider fix"><div class="texture"><div class="content"><div class="content-pad">	<div class="flexwrap animated fadeIn wrap-control-nav">
		<div class="fslider">
		<div class="flexslider pl-clone">
		  <ul class="slides">
			
			<li><img src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/themes/pagelines-template-theme/sections/quickslider/images/image3.jpg" /></li><li><img src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/themes/pagelines-template-theme/sections/quickslider/images/image1.jpg" /></li><li><img src="http://oudisnieuw.net.websrv.makeweb.nl/wp-content/themes/pagelines-template-theme/sections/quickslider/images/image2.jpg" /></li>		  </ul>
		</div>
		</div>
		<div class="fs-nav-container control-nav"></div>
	</div>
	
		</div></div></div></section>				</div>
			</header>

 

Can anybody help me how to do this?

 

Kind regards Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

In order to do this, you will need to find the correct class, then use the following:

 

 

 

.section-sectionname { 
float: left;
width: 48%;
}

 

Do the same for both sections, additional styling may be required but this should do the trick.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Hi, it was neccesarry to really do some more study on CSS (absolute vs relative, block vs inline, float etc), but then I got it working. 

 

What I wonder is, I never see something like 'section-sectionname', when i look up the html I would write it like 'section#quickslider'...

How come 'section-sectionname' is also valid css?

 

Kind regards,

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

You should really use IDs for your custom CSS, as they will most likely prove to be a pain later. All sections in PageLines Framework are given a unique class for that section, this class can be found in the <section ID="" class="Here"

 

For example, if you inspect the Branding section HTML, via Firebug or your browsers built-in tools, inside the <section> tag you will see the following:

 

<section id="branding" class="container section-branding fix">

 

That is the class you should be using to target that particular section. All sections have a similar class name.

 

To use this class in your CSS, lets imagine you wish to increase the padding for the Branding section.

 

#site .section-branding .content-pad { padding: 60px; }

 

#site = This is an override to make sure your custom CSS is loaded.

.section-branding = The Sections class name

.content-pad = This div controls the padding for the section, which is by default 15px.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Thanks Danny, I had overlooked that!

Your explenation helped me.

 

Kind regards,

 

Willem


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem. ;)


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×