current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote -5 down vote favorite

I have the following form in my jsFiddle. I wonder if this is the best way to achieve this result.

Thank you in advance.

I am using a lot of divs.

Being that it must have width 100% full window.

HTML

<div id="hexagon"></div> **x25**

CSS 

#hexagon {
    width: 30px;
    height: 300px;
    background: #8fc400; /* Old browsers */
    background: -moz-linear-gradient(top, #8fc400 0%, #8fc400 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fc400), color-stop(100%,#8fc400)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #8fc400 0%,#8fc400 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #8fc400 0%,#8fc400 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #8fc400 0%,#8fc400 100%); /* IE10+ */
    background: linear-gradient(to bottom, #8fc400 0%,#8fc400 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
    position: relative;
    float:left;
}

#hexagon:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #8fc400;
}
share|improve this question
 
is this supposed to be a background for the header? –  Malachi Dec 9 '13 at 18:10
 
Yes guy, is a background header. –  Igao Dec 10 '13 at 0:02
 
you should just create a background header, and then use CSS to make it repeat on the x-axis. this is too much HTML –  Malachi Dec 10 '13 at 0:09
2  
Normally I wouldn't ask but it seems a valid question given what it looks like you are doing. WHY ARE YOU NOT USING AN IMAGE? –  Malachi Dec 10 '13 at 16:04
1  
You need to explain why you're opting to have ugly extra markup over using a more efficient bg image. "I know it's bad, just tell me how to do it anyway!" isn't going to get you very far. –  cimmanon Dec 11 '13 at 20:55
show 8 more comments

closed as unclear what you're asking by Malachi, Mat's Mug, Jeff Vanzella, Jamal♦ Dec 12 '13 at 7:57

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question.If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer

up vote 4 down vote

I don't think that what you are doing is going to give you the intended results easily or results that are maintainable.

25 of those divs won't stretch across my screen. I would create one Graphic and then have a background-repeat:repeat-x; set on the Header (or whatever element you are using) to achieve what you want. doing it this way is nonsense in my opinion, and I assume other's opinions as well.

share|improve this answer
 
Friend, I know it's absurd to do so! I am posting the code to know the best way to do it. (Also had ever had up there) I already use this Methodology to repeat the background. I will continue using even a picture. thks –  Igao Dec 11 '13 at 12:26
 
@Igao, please add additional information to your question stating why you are not doing it the way that everyone is thinking you should do it –  Malachi Dec 11 '13 at 13:26
 
@ Malachi, the issue is not this. I just wonder if there is a better way to do what I was thinking. The reason I do not use images does not matter. Thank you. –  Igao Dec 11 '13 at 14:13
1  
@Igao, it does matter, because the second you start doing what you are doing, everyone is going to say the same thing that I said, what is the reason that you are going this route? is it a requirement, is it because of performance, is it because of a certain functionality, is it because of the Javascript being used, is it because of the server side language. it is possible to give you a better way to do this depending on what you are doing. since it looks like you are just trying to build a background that fits the width, it is better to use the repeat CSS –  Malachi Dec 11 '13 at 14:49
 
Forget expensive since I gave up that idea. What I tried to do was not a secret, but no one knows a better way to do this without using images. Strong hug. That's the answer. –  Igao Dec 11 '13 at 15:52
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.