Jump to content

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


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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...