• 0

help with html / css


Question

ok got a question. First of let me say I am TERRIBLE in HTML/CSS, so anyways maybe someone can help!!

If I have a dark background on my html page and I want to add rectangle to the center of it (Think widescreen) how would I go about making the rectangle go across the full screen. The only problem is the rectangle I want to have a glow so I have to use a static image I made in fireworks (A glow around the edge to give it that extra pop). I really don't know how to completely center the image or images and or make them go across the full screen (even if someone has a higher resolution).

Here is anexample of something I want to achieve:

post-22749-1149789356.jpg

Link to comment
https://www.neowin.net/forum/topic/468200-help-with-html-css/
Share on other sites

2 answers to this question

Recommended Posts

  • 0

make the glow bit just one image. it should be high enough so that the top glow would go over the image you want and the bottom glow should go under the image you want. so say you have an image that is 200px high and each glow is 10px high make the image 220px high and 1 px wide with the glow part on the top/bottom of the image. this will work as the background image.

now in css you make something like

#imagecontainer{

background: url['path_to_your_background.ext'] repeat-x;

height:220px;

position:absolute;

top:50%;

width:100%;

}

#imagecontainer img{

height:200px;

position:absolute;

top:50%;

left:50%;

}

then in html make a div with an img tag inside

<div id="imagecontainer">

<img src="path_to_your_image.ext" />

</div>

This should center the div on the page verticaly and stretch it to cover the whole page.

The image should center horizontaly and verticaly inside the div so that both glows should be visible.

I havent tested this code, just something from the top of my head, so it might not work, but I think it should cover the basics you need

  • 0

thank you reply!!

I understand what you are getting at, but I am still confused I did what you said and the line at 1 pixel is not repeating to make it go across the screen.

Even so what happens if I did it inside a table so I can have a few different cells to overly the text and images to make it look exactly like the picture I made in fireworks.

As I said before I am terrible in HTML/CSS I dont even know where in the body i should place the div tags. Thanks again! and any further explanation will sure help me finish this up hopefully!!

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Apple is giving the upcoming iPad Pro a second front-facing camera by Taras Buria The M4-based iPad Pro brought a few significant changes to Apple's high-end tablet, such as tandem OLED displays, a much-thinner chassis, camera changes, and a much more powerful processor. Its successor, the M5-based iPad Pro, is rumored to retain the current form factor without major changes. However, there is one rather odd hardware update that is coming with the next iPad Pro. A new report says that a successor to the current iPad Pro lineup will offer a more powerful Apple M5 processor and more cameras on the front. While Apple experimented with a dual-camera setup on the back of the recent iPad Pros (this was killed in the M4 generation), the front of every iPad has always had a single camera, minus the original one, of course, which had none. With the M5 iPad Pro, Apple is rumored to double the number of front-facing cameras for a rather odd reason. No, Apple is not using a dual-camera setup for depth of field effects or a wider angle. According to Bloomberg's Mark Gurman, the logic is much simpler: satisfy fans of the portrait orientation. The problem is that in the 2024 iPad Pro, Apple moved the front-facing camera to the longer side of the tablet, where it makes much more sense for FaceTime calls, selfies, and everything else. However, that makes the iPad a bit awkward to use when in portrait mode, especially when it comes to FaceID. Now, it appears that Apple wants to make both camps happy by adding another front-facing camera to the shorter side of the screen. There is no information on whether we will see just one more front-facing camera or the entire FaceID module. Given Apple's nature of blaming users for some of its device shortcomings (the infamous "you are holding it wrong" line), it is quite interesting to see Apple addressing a seemingly minor concern with such an overkill solution.
    • Hello! It's default behavior. I assume that F:\ and E:\ are external drives? My local drives are under This PC. So File Explorer is showing storage from different locations: This PC (under which are local drives) Mapped Network drives External USB drives The Network (under which, my NAS) You could drag the drive to Quick access to see it all the time, but in my case when I expand This PC, the local drives remain in view even when I close and reopen the window.
    • It also lost Window Share support, so can no longer share websites from Edge to it or files from Explorer using the Share button or photos from Photos app. Mind you, not that this is impossible from a webappp since the new Outlook does support Share and that's a web app.
    • Was that just a warning about malware in general, or is there a list of malware that's proven to affect a computer outside a sandbox/vm?
    • One of the best file managers for Windows 11 gets brand-new Omnibar and more by Taras Buria Files is a popular file manager for Windows 10 and 11, and it is one of the best alternatives to the stock File Explorer. The app is packed with features, it looks fantastic on Windows 11, it is free, and it regularly receives feature updates. The latest preview update, version 3.9.12, introduces some big changes to the address bar, search, and filtering. With Files Preview 3.9.12, the app is getting the new Omnibar. It is a new control that works the same as your browser's address bar. It combines the "breadcrumb" path and the search box into a single UI element. By default, the new Omnibar displays breadcrumbs, which are the current path to the folder with quick access to each directory in the path and their nested folders. Besides the visual overhaul, the new Omnibar introduces a new Home button with a dedicated flyout that lets you navigate to quick access items, drives, and other elements. You can click the new Omnibar (or press Ctrl + L) to edit or copy the current path, paste a new address or navigate to another folder by typing its location. The Omnibar also now hosts the Command Palette, which you can trigger by pressing Ctrl + Shift + P. With the Omnibar, Files no longer uses a dedicated search bar. You can search for files by pressing Ctrl + F or clicking a search button in the omnibar. It is also worth noting that developers changed how filtering works. Now, Files has a dedicated filter UI instead of defaulting to filtering items when typing in the search box. It works faster and it is more intuitive. Other changes in Files Preview 3.9.12 include OX Drive integration and partial RTL support. You can download Files Preview 3.9.12 from the official Files.community website. If you want to support developers, you can purchase the preview version from the Microsoft Store.
  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      497
    2. 2
      Michael Scrip
      206
    3. 3
      ATLien_0
      201
    4. 4
      Xenon
      136
    5. 5
      +FloatingFatMan
      117
  • Tell a friend

    Love Neowin? Tell a friend!