• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Help with simple issue on website

Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
Hey guys!!

So, i'm having this issue. I have designed our companies website and its been live for a while now. I wanna make a simple change, but for the life of me can't figure this out. Our website is http://www.mycompumore.com and if you look at the green image with the word "technology" in it... to me its out of place. I wanna place that image so it is at the left so it start at the white border... Anyone have a simple fix for me to accomplish this? It's driving me crazy.

Any help would be appreciated.

Thanks,
-Dave
 
Joined
Jul 18, 2008
Messages
2,894 (0.50/day)
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4790K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x8GB Gskill 2400mhz
Video Card(s) EVGA GTX 980
Storage SSD Samsung 500GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 10 64 Bit
Benchmark Scores 3DMark Vantage 51342
I think it looks proper as it is.

If you change it will offset the rest of the site.
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
Part of the reason I want that image all the way to the left is so I can make the video width a little longer.
 
Joined
Jul 18, 2008
Messages
2,894 (0.50/day)
Location
South Carolina
System Name KILLER
Processor Intel Core i7 4790K
Motherboard MSI Z87 G45 Gaming
Cooling Water Cooling
Memory 2x8GB Gskill 2400mhz
Video Card(s) EVGA GTX 980
Storage SSD Samsung 500GB
Display(s) 24" Asus 144hz
Case Cooler Master HAF
Audio Device(s) X-Fi Platinum
Power Supply Antec 1200 Watt Modular
Software Windows 10 64 Bit
Benchmark Scores 3DMark Vantage 51342
Just shorten your image and increase the video box.
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
I've tried that and it offsets the video and the rest of the set. Its a werid issue and its driving me insane!
 
Joined
Jul 5, 2008
Messages
272 (0.05/day)
System Name WorkStation
Processor Intel i7 3770k @ 4.4GHz
Motherboard ASRock Z77 Extreme6
Cooling Corsair H110 Water Cooler AIO
Memory Corsair Vengeance 8GB DDR3 1600MHz
Video Card(s) MSI GTX680 Twin Frozr III OC
Storage WD 1TB Sata III
Display(s) Samsung 22-inch LED 1080p
Case Corsair Carbide Air 540
Audio Device(s) Onboard Realtek 898 HD
Power Supply Corsair CS750M Gold
Software Windows 8.1 Pro x64
In your CSS (layout.css), try removing the bold codes:

#widgets {
width: 980px;
margin: 0 auto;
}

#widgets #miniBanner {
float: left;
margin-right: 25px;
margin-top: 0px;
padding-left: 10px;
}
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
In your CSS (layout.css), try removing the bold codes:

#widgets {
width: 980px;
margin: 0 auto;
}

#widgets #miniBanner {
float: left;
margin-right: 25px;
margin-top: 0px;
padding-left: 10px;
}

That kinda worked. It did send the image to the left where I wanted it... but it offsets the little box below the video where it says "More Customer Testimonials"

Thanks
 
Joined
Jul 5, 2008
Messages
272 (0.05/day)
System Name WorkStation
Processor Intel i7 3770k @ 4.4GHz
Motherboard ASRock Z77 Extreme6
Cooling Corsair H110 Water Cooler AIO
Memory Corsair Vengeance 8GB DDR3 1600MHz
Video Card(s) MSI GTX680 Twin Frozr III OC
Storage WD 1TB Sata III
Display(s) Samsung 22-inch LED 1080p
Case Corsair Carbide Air 540
Audio Device(s) Onboard Realtek 898 HD
Power Supply Corsair CS750M Gold
Software Windows 8.1 Pro x64
but it offsets the little box below the video where it says "More Customer Testimonials"

Thanks


For that you have to change this:

#widgets #miniBanner {
float: left;
margin-right: 35px;
margin-top: 0px;
}

You have to change 25px to 35px.
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
That kinda worked. It did send the image to the left where I wanted it... but it offsets the little box below the video where it says "More Customer Testimonials"

Thanks

Great!! thanks alot! So how would I make the video width a little longer? I've tried adjusting it but it off sets the rest of the page!

thanks
 
Joined
Jul 5, 2008
Messages
272 (0.05/day)
System Name WorkStation
Processor Intel i7 3770k @ 4.4GHz
Motherboard ASRock Z77 Extreme6
Cooling Corsair H110 Water Cooler AIO
Memory Corsair Vengeance 8GB DDR3 1600MHz
Video Card(s) MSI GTX680 Twin Frozr III OC
Storage WD 1TB Sata III
Display(s) Samsung 22-inch LED 1080p
Case Corsair Carbide Air 540
Audio Device(s) Onboard Realtek 898 HD
Power Supply Corsair CS750M Gold
Software Windows 8.1 Pro x64
Great!! thanks alot! So how would I make the video width a little longer? I've tried adjusting it but it off sets the rest of the page!

thanks

The value you set for width is wrong... try increasing it or you could remove it totally.

#widgets {
width: 980px;
}
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
The value you set for width is wrong... try increasing it or you could remove it totally.

#widgets {
width: 980px;
}

Appreciate all the help... but doing that it offsets the video and the box below it!!
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
If you look at the video... there is a lot of white space to the right of the video... I wanna increase the width of the video to to fit in that white space... but not all the way. if that makes any sense.
 
Joined
Jul 5, 2008
Messages
272 (0.05/day)
System Name WorkStation
Processor Intel i7 3770k @ 4.4GHz
Motherboard ASRock Z77 Extreme6
Cooling Corsair H110 Water Cooler AIO
Memory Corsair Vengeance 8GB DDR3 1600MHz
Video Card(s) MSI GTX680 Twin Frozr III OC
Storage WD 1TB Sata III
Display(s) Samsung 22-inch LED 1080p
Case Corsair Carbide Air 540
Audio Device(s) Onboard Realtek 898 HD
Power Supply Corsair CS750M Gold
Software Windows 8.1 Pro x64
Appreciate all the help... but doing that it offsets the video and the box below it!!

If you look at the video... there is a lot of white space to the right of the video... I wanna increase the width of the video to to fit in that white space... but not all the way. if that makes any sense.

I know, that it offsets the video and the box below it.

I was asking you to fix only the main wrong things and was hoping you would figure out the rest on your own.

If you remove the width totally, there won't be any "white space" to the right of the video.

#widgets {
width: 980px;
}

Then try adjusting other content's width, margin, padding values so that it is no longer out of place.
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
I know, that it offsets the video and the box below it.

I was asking you to fix only the main wrong things and was hoping you would figure out the rest on your own.

If you remove the width totally, there won't be any "white space" to the right of the video.

#widgets {
width: 980px;
}

Then try adjusting other content's width, margin, padding values so that it is no longer out of place.

Great, everything worked out great! Thank you so much. I'm sure you can tell i'm an amateur when it comes to web design by looking at my code. Again, thank you for the help!
 
Joined
Jul 5, 2008
Messages
272 (0.05/day)
System Name WorkStation
Processor Intel i7 3770k @ 4.4GHz
Motherboard ASRock Z77 Extreme6
Cooling Corsair H110 Water Cooler AIO
Memory Corsair Vengeance 8GB DDR3 1600MHz
Video Card(s) MSI GTX680 Twin Frozr III OC
Storage WD 1TB Sata III
Display(s) Samsung 22-inch LED 1080p
Case Corsair Carbide Air 540
Audio Device(s) Onboard Realtek 898 HD
Power Supply Corsair CS750M Gold
Software Windows 8.1 Pro x64
Great, everything worked out great! Thank you so much. I'm sure you can tell i'm an amateur when it comes to web design by looking at my code. Again, thank you for the help!

No problem... Anytime! :)
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
No problem... Anytime! :)

Appreciate it ... my next project is to add a few more spaces between the "bubbles" ... I design this site but its been a while. I tough myself html, css, and php when designing this site. I've been trying to add spaces in between them for a while and i'm just lost!
 
Joined
Jul 5, 2008
Messages
272 (0.05/day)
System Name WorkStation
Processor Intel i7 3770k @ 4.4GHz
Motherboard ASRock Z77 Extreme6
Cooling Corsair H110 Water Cooler AIO
Memory Corsair Vengeance 8GB DDR3 1600MHz
Video Card(s) MSI GTX680 Twin Frozr III OC
Storage WD 1TB Sata III
Display(s) Samsung 22-inch LED 1080p
Case Corsair Carbide Air 540
Audio Device(s) Onboard Realtek 898 HD
Power Supply Corsair CS750M Gold
Software Windows 8.1 Pro x64
I've been trying to add spaces in between them for a while and i'm just lost!

Again the problem is the width you set. From the looks of it, your default width is 1050px, so change the bold values in your CSS:

Code:
#bubbles {
[INDENT]clear: both;
[B]width: 1050px;[/B]
margin: 0 auto;
position: relative;
top: 10px;[/INDENT]
}

#bubbles #bubble {
[INDENT]float: left;
width: 262px;
height: 240px;
[B]margin-left: 36px;[/B]
background-repeat: no-repeat;
padding: 20px;[/INDENT]
}

Also, you are not supposed to put the same id for multiple contents, I am talking about the id "bubble".

You could code like this:

Code:
<div id="bubbleBlue" class="bubble">...</div>
<div id="bubbleRed" class="bubble">...</div>
<div id="bubbleGreen" class="bubble">...</div>
 
Joined
Mar 13, 2009
Messages
827 (0.15/day)
Location
Bannock County
Processor AMD FX-8320 4.1Ghz
Motherboard Asus Aura
Cooling Corsair H60
Memory Crucial Ballistix Sport 32GB
Video Card(s) EVGA 1060 SC
Storage Intel 535 Series SSD + Seagate FireCuda 2TB
Case NZXT
Power Supply EVGA 650 Watt
Software Windows 10 Pro 64-Bit
Again the problem is the width you set. From the looks of it, your default width is 1050px, so change the bold values in your CSS:

Code:
#bubbles {
[INDENT]clear: both;
[B]width: 1050px;[/B]
margin: 0 auto;
position: relative;
top: 10px;[/INDENT]
}

#bubbles #bubble {
[INDENT]float: left;
width: 262px;
height: 240px;
[B]margin-left: 36px;[/B]
background-repeat: no-repeat;
padding: 20px;[/INDENT]
}

Also, you are not supposed to put the same id for multiple contents, I am talking about the id "bubble".

You could code like this:

Code:
<div id="bubbleBlue" class="bubble">...</div>
<div id="bubbleRed" class="bubble">...</div>
<div id="bubbleGreen" class="bubble">...</div>

worked perfectly, thanks again buddy! You have been a huge help!
 
Top