Jump to content

How to make this box in CSS/HTML?...


rootKID
 Share

Recommended Posts

Hello W3S... i have a little trouble here witch im in a need of little help with...im for the momment being trying to make a new portfolio design... the only problem im standing with right now is the box im making... (VIEW AT PICTURE IVE ADDED BELOW...) well... what im trying to do is to make a (latest News) box... but note that i said (box)... all the elements/modifications im making on my portfolio should be places into a nice designed box...that would look alot pretty... the only problem is that i dont know how to make these boxes... orr... yeah... i can, but it would take hours/days... since im not the best when its comming to the box-making css/html part... and besides that, i also need help to code the news box so (as seemed in the picture added...),so people can see (date added,they can drop the table down with a java-klappe,ect...) but the most important part is to code/design the box...so if you could give me some sort of tutorial how to add... then i would be so freaking happy! :)... thanks dudes... hoping someone can help me out. :).Hoping answers soon... Regards: rootKID EDIT: If you did not understand what i just said... then leave a comment and i will (try) my best to make a new and more explained/detailed stuff of the problem i have... thanks..

Edited by rootKID
Link to comment
Share on other sites

It looks like it has a structure like this one:

<section class="news">  <header>	<h2>Latest News...</h2>  </header>  <div class="content">	News articles here  </div>  <footer><a href="">To top</a></footer></section>

How to style:The <section> element would have a thick near-black bottom border and the left and right borders would be 1px and bluish-greyThe <header> would have the near-black background.The <h2> element would have margins set to 0The content <div> would have a thick near-white border with a non-repeating background image of a white square places at the bottom rightThe <footer> element would have top and bottom 1px bluish-grey borders and a centered text alignment In the case of HTML 4 or XHTML just substitute all those strange elements with <div>s

  • Like 1
Link to comment
Share on other sites

nice... and fast reply... thanks foxy... but... can you post what you'll mean in CSS...i dont follow the css part still.. :/... EDIT: Oops... i ment (Ingolme)... :). BUMP EDIT: and yeah... it is html 4... :),,,

Edited by rootKID
Link to comment
Share on other sites

i do know... just not that good in the design part... but i will try again... i will send feedback later if i succes dude :)..thanks again :)...

Link to comment
Share on other sites

sorry for late reply dudes, but was so tires yesterday... but thanks.. it worked! :D. EDIT: just for note if any cares... what i needed the box for was to insert it into a function so that i could call it into (XXX) pages... and then all the modifications i now have on the port of my... then they will all be inside a box that gives it (ALOT) more cooler design! :D.

Edited by rootKID
Link to comment
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
 Share

×
×
  • Create New...